Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Responsive CSS whilst maintaining set widths

Deleted User
5 years ago Sep 06, 2016 10:47am

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

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?

Deleted User
5 years ago Sep 07, 2016 9:38am

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

 

+1