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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Responsive Layout is not working
below is my Main UI.. and my Styles.scss
package com.example.projnew;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.util.PropertysetItem;
import com.vaadin.server.Responsive;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Form;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@SuppressWarnings("serial")
@Theme("projnew")
public class ProjnewUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = ProjnewUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
CssLayout layout = new CssLayout();
layout.setSizeFull();
layout.setStyleName("flexwrap");
setContent(layout);
Responsive.makeResponsive(layout);
Label title = new Label("Space is big, Really big");
title.addStyleName("title");
layout.addComponent(title);
Label description = new Label("This is a "
+ "long description of the image shown "
+ "on the right or below, depending on the "
+ "screen width. The text here could continue long.");
description.addStyleName("itembox");
description.setSizeUndefined();
layout.addComponent(description);
}
}
My ScSS..
@import "addons.scss";
@import "projnew.scss";
/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in projnew.scss */
.projnew {
@include addons;
@include projnew;
.flexwrap {
background: black;
&[width-range~="0-300px"] {
background: red;
}
}
}
Hello,
Are you defining those rules in styles.scss? If so, move them to your <theme-name>.scss file instead.
By default, the styles.scss file contains this line:
/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. *//* The actual styles should be defined in <theme-name>.scss */
Also, FWIW, the minimum width of the browsers I use all exceed 300px. If you can't see any changes, make sure that you can actually reach the breakpoints you set.
Thank you for your help sir.. It work and it help me alot.. now I can continue to my work..