Responsive CSS whilst maintaining set widths - css

Question

Amateur with both CSS and vaadin here, trying to implement a responsive UI in Vaadin, but having issues with setting widths of UI objects; everything seems to break responsive CSS. Heres an example of what I'm describing:
CssLayout filterTypeLOptimiseBLayout = new CssLayout();
filterTypeLOptimiseBLayout.setResponsive(true);
filterTypeLOptimiseBLayout.addStyleName("flexwrap");
filterTypeLOptimiseBLayout.setSizeFull();
Label filtTypeLabel = new Label("Filter Type Filler");
filtTypeLabel.addStyleName("filtTypeLabel");
filtTypeLabel.setSizeFull();
filtTypeLabel.setResponsive(true);
filterTypeLOptimiseBLayout.addComponent(filtTypeLabel);
And the corresponding responsive CSS block applied to filtTypeLabel:
/* ---- Filter Type Filler Label ------*/
//Basic inherited CSS
.filtTypeLabel {
padding: 5px;
}
//Mobile
.filtTypeLabel[width-range~="0-300px"] {
font-size: 12pt;
margin: 5px;
}
//Small Browser
.filtTypeLabel[width-range~="301px-600px"] {
font-size: 14pt;
margin: 10px;
}
//Big Browser
.filtTypeLabel[width-range~="601px-"] {
font-size: 16pt;
margin: 20px;
}
With the previous code, I achieve scaling of the button font and margin as expected, but I'd like control over the width of the label as well. Using filtTypeLabel.setSizeFull(); causes anything on the same line as the label to wrap around to the next line as the label occupies all space horizontally. Calling filtTypeLabel.setWidthUndefined(); instead breaks the responsive scaling, and filtTypeLabel.setWidth("5%"); breaks it too. Setting max-width and min-width in the CSS also breaks it.
Is there any way to apply a set width to a Responsive CSS enabled object?

Answer 1

Width-range check works for specific component, not for your window size. So if your component always has the same size, this check will show the same result all the time. You need to create such component, responsive and with width-range styles, which will change its size depending on window size. And all your responsive children must have child styles.
CssLayout filterTypeLOptimiseBLayout = new CssLayout();
filterTypeLOptimiseBLayout.setResponsive(true);
filterTypeLOptimiseBLayout.addStyleName("flexwrap");
filterTypeLOptimiseBLayout.setSizeFull();
filterTypeLOptimiseBLayout.setResponsive(true);
.flexwrap {
.filtTypeLabel {
padding: 5px;
}
}
//Mobile
.flexwrap[width-range~="0-300px"] {
.filtTypeLabel {
font-size: 12pt;
margin: 5px;
}
}
//Small Browser
.flexwrap[width-range~="301px-600px"] {
.filtTypeLabel {
font-size: 14pt;
margin: 10px;
}
}
//Big Browser
.flexwrap[width-range~="601px-"] {
.filtTypeLabel {
font-size: 16pt;
margin: 20px;
}
}