Hi,
i add a panel and assign class graph to it, in the html i get
<div class="v-panel v-panel-graph graph" style="overflow: hidden;">
how to remove the element style : style=“overflow: hidden;”
the css class :
.graph{
border-width: 0pt;
padding: 0pt;
height: 500px;
left: 0px;
top: 96px;
overflow: auto;
position: absolute;
white-space: nowrap;
width: 1030px;
z-index: 5
}
regards
walid
Hi,
Could you describe in more detail your need to remove the overflow:hidden?
That property is there for a reason, and you don’t actually need to remove it in order to use the Panel. In effect your added overflow:auto wouldn’t do anything, since the Panel’s content is contained inside another DIV (.v-panel-content) which already has overflow:auto.
If you have problems getting the content of the Panel to extend beyond the Panel’s visible area, you probably have some invalid layout configuration.
Sample code and use case would help in determining what’s the best solution for your need.
thanks for your replay,
i will describe my need in detail, i have image generated with jfreechart, big gantt chart, more than 2 screen hight, i cut the image in small one that represent the header and another the rest, i want to keep the header fixed, new in vaadin, my first page, i add couple panel, for each i add label with label.setContentMode(Label.CONTENT_RAW); the labels are the image tag, i don’t found image in vaadin ui, the two panels have the same start point but have different z-index, in the panel of the entire image i want to have vertical scroll.
Hope it is clear
Use Embedded instead.
Embedded embedded = new Embedded("", new ThemeResource("myGraph.png"));That will work if your image is named myGraph.png and it is located under WebContent/VAADIN/themes/yourOwnTheme/. There is also a lot of other Resource-types so you can get the image from other places too. For example ExternalResource takes the image from the internet with an url.
Also, you don’t have to play around with z-indexes. Put the top of the image directly into your view, then put a panel below it, and the rest of the image inside the panel. The panel gives you scrollbars only for the lower part, so the top part will keep at the same position at all times.
Your component stack would look something like this
Window
VerticalLayout
Embedded
Panel
VerticalLayout
Embedded
Window, and Panel should have setSizeFull(), the outer verticallaout should have setHeight(null) and setWidth(“100%”), the embedded and the inner verticalLayout should have setSizeUndefined();
i code what y say i have a small panel in the middle of th page, there is a code
String path = this.getURL().toString();//.getPath();
path = path.replaceAll("/vaadin", "");
VerticalLayout outer = new VerticalLayout();
outer.setHeight(null);
outer.setWidth("100%");
mainWindow.addComponent(outer);
Embedded eHeader = new Embedded("", new ExternalResource(path + "resources/entete_Gantt_994289.Png"));
//eHeader.requestRepaint();
outer.addComponent(eHeader);
Panel panel = new Panel("");
panel.setSizeFull();
VerticalLayout inner = new VerticalLayout();
Embedded rest = new Embedded("", new ExternalResource(path + "resources/Gantt_994289.Png"));
panel.addComponent(inner);
inner.addComponent(rest);
inner.setSizeUndefined();
rest.setSizeUndefined();
outer.addComponent(panel);
mainWindow.setSizeFull();
with the netbeans debuger the embedded is empty, size = 0, but when i paste the path in browser i get the image
Both Embedded’s are empty, or only one? And when you tested the path in the browser, did you test with the whole output of path + “resources/entete_Gantt_994289.Png”? Have you checked what the ExternalResource contains with the debugger?
In the debugger i expand the embedded, i have source type ExternalResource, i expand it i have String property sourceUrl, i copy paste her contain in the browser “http://localhost:8084/Meteor/resources/entete_Gantt_994289.Png” , i get the image. Both Embedded’s are empty.
i have another question, the image is imagemap, in the old version of this page developed with jsf when mouseOver a task in the graph(region map) i fire ajax transaction, give some information, display it in bubble, i do that with javascript, if user click on the region map i open detail page, i want to do that with vaadim, i don’t know how integrate javascript and communicate with vaadim component with javascript like assign value, fire ajax transaction etc.
so i want to do all with vaadin ui, i want to add transparent button over the regions map, to do that i must generate for each button css like this:
.extraButton-0036{
position: absolute;
top: 260px;
left: 65px;
width: 185px;
height: 16px;
background: transparent;
}
this because i don’t found how to assign style to the element directly bypassing the css file and class 
now i need to generate css file per user, how to add css file to the application? bypassing the commun styles.css of the theme, otherwise it will increase in size out of control.
Second question when i add button i want it take absolute position relative to the panel not relative to the top of the screen ?
I try Another way to do the job, i add onMouseOver to the area the result is like this
<area onmouseout="" onmouseover='window.open("/Meteor/vaadin/DetailSommaire/num=1245");' href="/GanttMeteor/faces/DetailTache.jsp?numdem=1630823" alt="" title="23 nov. 2009 - 23 nov. 2009" coords="196,71,199,94" shape="rect"/>
firstable i try to call javascript function on the onmouseover to do ajax transaction and display the summary of the task in the balloon but this not work, may be vaadin catch the javascript event. i try with window.open and this work.
now i want to call another vaadin popup window with passing parameter in the url, i try with this format :*
/Meteor/vaadin/DetailSommaire/num=1245 or this /Meteor/vaadin/DetailSommaire?num=1245
and this not work, i don’t know how to do that correctly, the code of DetailSommaire :
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.gz.meteor;
import com.vaadin.Application;
import com.vaadin.terminal.ParameterHandler;
import com.vaadin.terminal.URIHandler;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;
import java.util.Map;
public class DetailSommaire extends Application implements URIHandler, ParameterHandler {
String textToDisplay = "- no text given -";
Label label;
Window main;
public void handleParameters(Map parameters) {
// Get and store the passed HTTP parameter.
if (parameters.containsKey("text"))
textToDisplay =
((String[])parameters.get("text"))[0]
;
System.out.println(textToDisplay);
label = new Label(textToDisplay);
main.addComponent(label);
}
public void init() {
// First create the main window.
main = new Window ("Meteor");
setMainWindow(main);
// Create another application-level window.
final Window mywindow = new Window("Second Window");
// Manually set the name of the window.
mywindow.setName("mywindow");
mywindow.setHeight("200px");
mywindow.setWidth("200px");
// Add some content to the window.
mywindow.addComponent(new Label("Has content."));
// Add the window to the application.
addWindow(mywindow);
}
}
how do that.
Regards
Walid
You may need to look into creating a component of your own. Luckily, there is a
ImageMap widget
which you could probably use as an example. Be sure to check out
Chapter 10
(Developing Custom Components) of the book.
As to the parameter handler, it needs to be added to the main window with
main.addParameterHandler(this)
Check out the
relevant chapter
in the book.
Thanks for your replay, that’s my need, why it’s not packaged in the standard vaadin jar? i don’t know how to create a custom component, i’m not gwt developer, i begin to solve my problem with iframe added by label, it contain a jsp page.