MainWindow content size problems

Hello, I am new to Vaadin and I am running into an interesting problem. I am running Vaadin application inside a Liferay instance. I want my application to stay within the browser width and height. So after doing some reading, i found that i need to set my MainWindow’s content size to full so i do this.

	final Window mainWindow = new Window(name);
        mainWindow.setSizeFull();
        mainWindow.getContent().setSizeFull();
        setMainWindow(mainWindow);

This ends up failing to display anything, versus when i leave it to the default VerticalLayout size (width:100% height:undefined) where everything shows up normal, but vertically it exceeds the browser window, displaying scrollbars.

The Debug window says this:

Any suggestions?

Thanks.

Hello,
I believe the main window is supposed to take the whole browser space, so I would suggest to leave it as is without calling any setSizeXXXX methods. Of course you could call
mainWindow.getContent().setHeight(…)
but I think you will not get any scrollbars unless you tweak the css with some sort of an overflow:auto etc.

If the content of the main window exceeds the browser window height and you don’t want that, then you could use a panel with specific height and then add that to the main window.

i.e.


Panel mainPanel = new Panel();
mainWindow.addComponent(panel);
mainPanel.setHeight("750px");
//then add everything to the mainPanel....

Maybe you are misunderstanding me, but if I leave the main window as is then it will expand beyond the browser height as components are added to it. So my end goal is to have the mainWindow, set its size to the browser window size, and then when the browser size has been changed the window size changes. I can see that what i have now is working because in the debugger, there all calls to format the layout during a window resize.

Hello,
I hope i’m not confused and i’m not confusing you…
Generally the mainwindow by default takes the space of the browser and resizes along with the browser.
If components are added to the mainWindow and its size goes beyond the browser then the browser will display scrollbars.
If you don’t want the mainwindow to go beyond the browser window you simply don’t add components to the mainWindow but instead you add one single panel to the mainwindow and then add all your components to that panel… If the components inside the panel go beyond the height of the panel then the panel displays scrollbars not the browser. Regarding the height of the panel you can set its height… i’m not sure if only the panel will show scrollbars by setting sizefull to the panel.

Here is where i am confused, the window by default will have a verticalLayout with an undefined height. That means it can expand as anything inside it expands. So i add my panel with the default values which is also a verticalLayout with undefined height. But any components i add to the panel will simply cause the panel to grow because its height is undefined, and i can’t set the panel size to full because then you would have a relative height inside an undefined height.

I can’t just set a height for my panel because I would want it to be the size of the browser window for users with different screen sizes.

Matt

Ok one method of doing it is by setting 100% height for the mainwindow in order to set the boundaries, and 100% on the panel in order to have the scrollbars
i.e.


//add everything in innerPanel or some other container

//set sizes
innerPanel.setHeight(100, Sizeable.UNITS_PERCENTAGE);
mainWindow.getContent().setHeight(100, Sizeable.UNITS_PERCENTAGE);
mainWindow.addComponent(innerPanel);

You can also use a customlayout, or play around with css and i’m sure since the framework is so flexible there might be other ways of doing this :slight_smile:

This is back to the original problem, when i set the mainWindow’s content height then all my underlying components including my panel no longer display. I am not sure if this is because the Vaadin app is sitting in a liferay portal or not. But this is what i did as a workaround until i can figure out why setting the height of the main windows content is causing problems.


	final Window mainWindow = new Window("Window");
        setMainWindow(mainWindow);
        float liferayDockbar = 28f; //Wish there was a way to get at these components instead of hard coding
        float liferayBanner = 76f;
        mainWindow.getContent().setHeight(mainWindow.getHeight() - (liferayDockbar + liferayBanner),mainWindow.getHeightUnits());
        mainWindow.setImmediate(true);
        mainWindow.addListener(new Window.ResizeListener() {
			
			@Override
			public void windowResized(ResizeEvent e) {
		        float liferayDockbar = 28f;
		        float liferayBanner = 76f;
				mainWindow.getContent().setHeight(mainWindow.getHeight()-(liferayDockbar + liferayBanner),mainWindow.getHeightUnits());
				
			}
		});
        mainWindow.addComponent(innerpanel);

If you set the height of the main window to 100% this means it should be just as high as the element it is placed inside. If you have a standalone application this will be 100% of the browser window (as the application uses the full browser window) but in a portal this is not the case. In a portal this is relative to the size of the element the portlet is rendered in. Typically the height of this element would be zero unless you specify its height somewhere. Therefore the portlet will also have a height of zero.

You can specify the height of the portlet root div using a “style” init-param in portlet.xml like

<init-param>
			<name>style</name>
			<value>height:650px</value>
		</init-param>

Maybe there is some way in the portal aswell to define the layout so it uses the full screen size for the portlet

Well that displayed some results, but i am still at the original problem of having to set a pixel value for height. I tried setting the init-param height to 100% but that caused nothing to display. However i thank you for your answer, i now think that i may have to direct this question over to liferay. To see if it is possible to set the height to use the full screen length.

Thanks for the answer.

Still Unable to get the results I want. Why can vaadin find the width correctly but can not find the height when set to 100% ? Is it possible to Overwrite the Window class and modify it to size with the behavior i want.

This is because of what how the divs outside the Vaadin portlet are set up by Liferay - they expand in width to fill the (Liferay) layout column they are in, but do not normally expand in height. If I remember correctly, it does expand in height as well in the “full screen” mode for a portlet, though. I believe this should not be a question about Vaadin but about the Liferay layout used on the page (you don’t want a random portlet out of many on the screen to expand to fill the screen), although there might also be a Vaadin issue related to this.

As for overriding something if this cannot be done with existing settings in Liferay layouts, CSS and the Vaadin application, the client side class VView would probably be the place, and GWT deferred bindings could be used to select your custom subclass of it. Not sure, though, without looking into Liferay layouts and their div hierarchy and settings as well as the related Vaadin code.

I’m having a similar issue in internet explorer 11. (in others navigators it’a all ok)

.setSizeFull() or any attempt of set with to 100% make the page not to be displayed in this browser.

If you set the with to null, it’s displays but not at 100%