Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
responsive not working properly
Hello I have a CssLayout that I made responsive, it works when I 'minimize' the window but is not working when I 'maximize' it. For example:
if I open my window on width-range~="1400px-" and go down to width-range~="0px-760px", responsive css properties works fine, but not on the other way, If open the window on width-range~="0px-760px" and go to width-range~="1200px-" nothing happens.
Also on the developer tools I can see that the property 'width-range' is not updating when I make the width window bigger.
<div class="v-csslayout v-layout v-widget todo-view v-csslayout-todo-view v-has-width v-has-height" width-range="0px-760px" style="width: 100%; height: 100%;">
this is my css:
.todo-view[width-range~="0px-760px"] {
margin-left:0px;
z-index: 1;
}
.todo-view[width-range~="761px-990px"] {
margin-left:50px;
z-index: 1;
}
.todo-view[width-range~="991px-1200"] {
margin-left:100px;
z-index: 1;
}
.todo-view[width-range~="1201px-1400"] {
margin-left:150px;
z-index: 1;
}
.todo-view[width-range~="1401px-"] {
margin-left:200px;
z-index: 1;
}
here is my class:
@Override public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
log.info("enter");
removeAllComponents();
setResponsive(true);
setSizeFull();
addStyleName("todo-view");
if(rootLayout==null) {
rootLayout = new CustomLayout("todo");
}
rootLayout.setSizeFull();
rootLayout.setResponsive(true);
addComponent(rootLayout); resizeListeners.add(this);
}
Hello, did solve the problem anybody? The same problem is in Vaadin official demo - https://demo.vaadin.com/dashboard/#!dashboard - after login on dashboard. When you are changing width of the browser two columns "top grossing movies" and "notes" are always wrapped on the different widths (it depends on if you are minimalize or maximalize window).
Please help...