Been using Vaadin for few weeks now and the first problem has arisen which i just cannot find solution to.
My problem is that i can add components to window, set window and window’s content to full size with a call to setSizeFull, but after adding component to window, it goes to half height of the screen instead of full height. Below is the code i am using and a screenshot of the issue.
I have ran debug mode’s analyzer and it found no errors. Problem was found with Firefox, Opera, Chrome, Eclipse inline browser.
Code:
window.setStyleName(“test”); // Sets red background color for the background so we can see the problem
window.getContent().setSizeFull(); // Setting full size for both of these guys…
window.setSizeFull();
VerticalLayout vert = new VerticalLayout();
Label label = new Label(“jou”);
label.setStyleName(“jou”); // Setting green background for this label.
window.addComponent(label);
label.setSizeFull(); // Setting both layout and component to full size here, but the component still goes only to 50% on height…
vert.setSizeFull();
window.addComponent(vert);
vert.addComponent(label);
I have attached an picture of the problem in this message. Firebug shows that it adds a new unused div right below my label and therefore my label goes only to 50% of the screen instead of 100%. Any ideas how i could solve this?
I have created a project and added your code:
Window mainWindow = new Window(“Mytester Application”);
mainWindow.setStyleName(“test”); // Sets red background color for the background so we can see the problem
mainWindow.getContent().setSizeFull(); // Setting full size for both of these guys…
mainWindow.setSizeFull();
VerticalLayout vert = new VerticalLayout();
Label label = new Label("jou");
label.setStyleName("jou"); // Setting green background for this label.
mainWindow.addComponent(label);
label.setSizeFull(); // Setting both layout and component to full size here, but the component still goes only to 50% on height...
vert.setSizeFull();
mainWindow.addComponent(vert);
vert.addComponent(label);
setMainWindow(mainWindow);
setTheme("default");
what i get is the label at 100% So eather you have left something out that is cousing it or perhaps its in your css itself.
perhaps try :
vert.setExpandRatio(label,1);
I actually found it now. Created a new project, tried the CSS styles and everything seemed to work. Went back to my existing application and found out that
IcePush addon was needed to be added to my window as an component and that took the space.
I tried to add that component as an first component for my application, but if doing it like that, my label went to bottom space and took the 50% of the space again.
I also tried doing this to my ICEPush object:
ICEPush pusher = new ICEPush();
pusher.setWidth(0, Sizeable.UNITS_PIXELS);
pusher.setHeight(0, Sizeable.UNITS_PIXELS);
pusher.setEnabled(false);
pusher.setVisible(false);
But still not luck, still that hidden component took 50% of the space. Is this a bug?
VerticalLayout vert = new VerticalLayout();
Label label = new Label(“jou”);
label.setStyleName(“jou”);
label.setSizeFull();
vert.setSizeFull();
vert.addComponent(label);
window.addComponent(vert);
And the result has been attached as an image in this post.
i toyed a bit with your code and i got it working (had to replace the stylesheet name do as i have default):
Window window = new Window(“test”);
setMainWindow(window);
// Initialize icePush addon
ICEPush pusher = new ICEPush();
window.setStyleName("test");
window.getContent().setSizeFull();
window.setSizeFull();
VerticalLayout vert = new VerticalLayout();
Label label = new Label("jou");
label.setStyleName("jou");
label.setSizeFull();
vert.setSizeFull();
vert.addComponent(label);
vert.addComponent(pusher);
window.addComponent(vert);
vert.setExpandRatio(label, 1);
setTheme("default");
What i also noticed is that sometimes you think you look at changes but the compiler shows the old version still (for me at least in Eclipse)
To make sure i am checking the right version i change for example the lable text to something else to make sure i have the latest version on my screen.
else you might think your changes had no effect while they did
I do the variable replacing at times and did it also for now, no change.
I also did try with reindeer theme to see if i had any problems with my theme and same effect, the label starts to render at the center of the screen.
I did also remember that i had to switch my servlet-class to org.vaadin.artur.icepush.ICEPushServlet with ICEPush, changed that back to normal and still no change.
Getting bit strange, did you get that component to be hidden Arnold?
I found the actual problem but i do not know how to get pass this.
When adding hidden components to main window (component.setVisible(false)) they will be hidden in the panel, but right after doing window.getContentPanel().setSizeFull() or setting the main window content height, it does also resize the hidden components. Is this a feature?
Here’s some sample code, can anyone think of any css hacks or similar so that i could make my visible label component now go to full screen height without changing the content panel’s height as it also resizes the hidden component?
Example code of the problem:
// Create the main window.
Window window = new Window(“Test”);
window.setTheme(“VaIRCTheme”); // My theme implements the reindeer theme and has only background colors set for the .windowTest and for .labelTest.
setMainWindow(window);
window.setSizeFull();
// window.getContent().setSizeFull() // We can’t do this as it would also extend all hidden components inside it, which is what we do not want to happen.
// window.getContent().setHeight(100, Sizeable.UNITS_PERCENTAGE); // I also cant call this, as it also resizes the hidden label and makes my main component as 50% height.
window.setStyleName(“windowTest”);
// Add an hidden label into our main window. This label is invisible unless we change the window’s height.
Label hiddenLabel = new Label(“this label is visible.”);
hiddenLabel.setWidth(0, Sizeable.UNITS_PERCENTAGE); // Does nothing.
hiddenLabel.setHeight(0, Sizeable.UNITS_PERCENTAGE); // Does nothing.
hiddenLabel.setVisible(false);
window.addComponent(hiddenLabel);
// This label is visible in the main window, but only extends to full width right now, not height. Analyzer shows that main window height is not set. But if i do set the main window height, my hidden label component will also be taken into account in the resize operation.
Label label = new Label(“Label that should be the whole page height.”);
label.setSizeFull(); // This doesnt seem to be making my label as full height.
label.setStyleName(“labelTest”);
window.addComponent(label);
I did not order it to be invisible as the example of ICEPusher didnt set it to invisible also. I bet its invisible by default as its sepose to be an invisible object.
I Did notice indeed strange effects with the Addon but i am afraid you need someone who is an expert on this one.
I do remember i had something like this a time ago with the ServerPuch addon. But that was a while back.
perhaps an expert can inlighten us.
As i wrote in the example above, the same behavior happens with default Vaadin components (Label, for example).
So when you add two components, set another component to hidden and disabled and do getContentPanel().setSizeFull() it will also resize the hidden & disabled component even when you have set width & height for the disabled component to 0px. Is there something i am missing here?
I’ll try to clear things a bit: what you see is exactly like the layouts are specified to work, so no bugs. Sorry
If you set a width/height to a layout, they will distribute the extra space (left from fixed & undefined sized components in the layout) according to the expand ratios given to the layout. If no explicit expand ratios are set, they will all be equal implicitly.
So in order to reserve all the space for one component exactly, you need to call
layout.setExpandRatio(child, 1.0f); , where ‘child’ is the component which should get all the extra space.
In Vaadin 6 there are actually no invisible components (like ICEPush), they are added to the layout but their element is just 0x0 sized. That’s why they also get the extra space if no expand ratios are set.
Hope this clears it up a bit. You can read more about expand ratios from the Book:
Expanding components
One more thing: Can i set expand ratio to component directly in main window (didn’t find any method call for that in there), or do i have to create separate layout for where the components are located to be able to set the component expand ratio?
There is a deprecated method getLayout() inherited from Panel, but it is problematic as the content can also be a non-layout ComponentContainer. Thus, getLayout() would work if you don’t explicitly set some other kind of content but would not work in the general case.
