Vaadin 10 responsive steps on hidden component (setVisible(false))

Flow
1

Hi all,

I try to apply responsive design to my filter form. My form have two state: simple and detailed, by default I show simple form, as shown on Screen Shot 2018-09-11 at 9.30.36 AM by click on button I show other filter controls, but it render incorrect (see Screen Shot 2018-09-11 at 9.30.54 AM) if I little resize window all styles strat work correct. Code of my simple filter:

<vaadin-form-layout id="common_filters" responsive-steps='[{"minWidth": "0px", "columns": 2}, {"minWidth": "600px", "columns": 3},{"minWidth": "800px", "columns": 4},{"minWidth": "1000px", "columns": 5},{"minWidth": "1200px", "columns": 6}]
'>
	...
</vaadin-form-layout>

And code of my detailed filter, by default filter_details configured from server with setVisible(false)

<vaadin-form-layout id="filter_details" responsive-steps='[{"minWidth": "0px", "columns": 1},{"minWidth": "300px", "columns": 2}, {"minWidth": "600px", "columns": 3},{"minWidth": "800px", "columns": 4},{"minWidth": "1000px", "columns": 5},{"minWidth": "1200px", "columns": 6}]
'>
	...
</vaadin-form-layout>

How to solve this issue?
17263779.png
17263782.png

2

Hi,

I’d recommend checking if there’s an issue with the same behavior described at https://github.com/vaadin/vaadin-form-layout/issues and if there is not, please create a new one.

-Olli

3

Olli Tietäväinen:
Hi,

I’d recommend checking if there’s an issue with the same behavior described at https://github.com/vaadin/vaadin-form-layout/issues and if there is not, please create a new one.

-Olli

Thank you!

I found issue: https://github.com/vaadin/vaadin-form-layout/issues/66 and workaround.
I get success with suggested workaround with notifyResize()

UI.getCurrent().getPage().executeJavaScript("$0.notifyResize()", form.getElement());