Responsive Layout is not working

Flow
1

[b]
I have problem in using responsive in Version 7.4.5
I tried using the Responsive class but its not rendering to my page… ?
how could I solve this ?

below is my Main UI… and my Styles.scss
[/b]

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

2

Hello,

Are you defining those rules in styles.scss? If so, move them to your .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 .scss */

3

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.

4

Thank you for your help sir… It work and it help me alot… now I can continue to my work…