Responsive CSS whilst maintaining set widths

Vaadin 6 / 7 / 8 Framework UI
1

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:

[code]
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);

[/code]And the corresponding responsive CSS block applied to filtTypeLabel:

[code]
/* ---- Filter Type Filler Label ------*/
//Common to all sizes
.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;
}
[/code]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?

2

Posted the same question up on StackOverflow and got a response there, so will post solution here for anyone that has the same issue.

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