Widgets not reacting on window resize

Hi,

I set some widgets to be 70% wide (.setWidth(“70%”)).
But when I resize the browser window they don’t resize. I have to explicitly press F5.

Is there a way to make all the widgets listen to the browser’s size change, and react automatically?

Thanks,
Marco

You probably have some undefined/auto width layout (sound like if might be a CssLayout) somewhere between your main UI and the 70% wide widgets. Make sure all the layouts have a percentage size to allow them to resize correctly.

Hi Jouni, and thanks for your reply.

I had a check, and this is what I found:

starting from UI:

[code]
this.setWidth(“100%”);
[…]

this.externalLayoutWidget = new VerticalLayout();
this.externalLayoutWidget.setWidth(“100%”);
this.setCompositionRoot(this.externalLayoutWidget);
[…]

this.middleLayoutWidget = new HorizontalLayout();
this.middleLayoutWidget.setWidth(“100%”);
this.externalLayoutWidget.addComponent(this.middleLayoutWidget);
[…]

this.internalLayoutWidget = new VerticalLayout();
this.internalLayoutWidget.setWidth(“100%”);
this.middleLayoutWidget.addComponent(this.internalLayoutWidget);
[…]

this.frameWidget = new GridLayout();
this.frameWidget.setWidth(AApplicationCore.FORM_STANDARD_WIDTH); // AApplicationCore.FORM_STANDARD_WIDTH = “70%”
this.frameWidget.setStyleName(“mzFrame”); // min-width: 400px
this.internalLayoutWidget.addComponent(this.frameWidget);
[…]

this.contentWidget = new FormLayout();
this.contentWidget.setWidth(“100%”);
this.frameWidget.addComponent(this.contentWidget);
[…]

this.userIdWidget = new ComboBox(t(“User”));
this.userIdWidget.setWidth(“100%”);
this.contentWidget.addComponent(this.userIdWidget);
[/code]So it seems to me that every widget has a defined width, in percentage.

Is there any “repaint” event that I can trigger whenever the browser window resizes?

Thanks a lot,
Marco

There’s not a really any “repaint” methods on the server side, since you shouldn’t need to worry about things not rendering properly, as the layouts should work without such tinkering.

But yes, looking at the code, everything seems to have a percentage width.

You have some custom CSS also applied: could you try out your UI without the custom theme, and see if it’s still not working?

I tried by disabling the custom CSS directives, and also by appending “?theme=reindeer” to the URL, and nothing changes: the problem still happens.

So it seems like the width is calculated only on page loads…!?

Thanks for your time,
Marco

So it seems then. Could you
create a ticket
for this issue with a test case attached that reproduces the problem?

Ticket already opened:
http://dev.vaadin.com/ticket/13452
.
Could you please show me how to create a test case? Is a plain ExampleUI.java enough?

Also, doing a Page.getCurrent().addBrowserWindowResizeListener(this) partially mitigates the problem: enlarging the window makes widgets recalculate their size, while shrinking the window still shows the bug.

Thanks,
Marco

Yes, attaching a simple UI class that exhibits the problem (and ideally instructions on how to use it to reproduce the problem if not obvious, and on which browsers the problem occurs) is normally a good test case.

Thank you all for your help.

I could not reproduce the bug in the basic test case. So, after some days of debugging, it turned out it was not a problem with Layouts. My application was overriding UI.beforeClientResponse(), and that was causing problems to Layout and Table components as well.

(Anyway, I strongly support http://dev.vaadin.com/ticket/12191. And I’m going to resume
this old thread
of mine.)

Thank you,
Marco