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.
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);
}