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.

Responsive CSS whilst maintaining set widths

Deleted User
5 years ago Sep 06, 2016 10:47am
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;
 }
}