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 Panel
// Global variable overrides. Must be declared before importing Valo.
// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;
// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;
// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;
// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;
// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
@import "../valo/valo.scss";
@mixin group2responsive {
@include valo;
// Insert your own theme rules here
.main-layout{
background-color: red;
font-weight: bolder;
.personal-info {
width: 100px;
background-color: red;
}
.personal-info .v-textfield {
width: 100px;
}
&[width-range~="0-500px"] {
background-color: black;
.v-panel {
background-color: white;
width: 400px;
}
}
}
}
my main ui
package com.example.group2responsive;
import com.example.ui.ClaimsProductInfo;
import com.example.ui.PersonnalInfoPanel;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.Page;
import com.vaadin.server.Responsive;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@SuppressWarnings("serial")
@Theme("group2responsive")
public class Group2responsiveUI extends UI {
public static PersonnalInfoPanel personalInfo = new PersonnalInfoPanel();
public static ClaimsProductInfo claimsProduct = new ClaimsProductInfo();
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = Group2responsiveUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
setTitle("CLAIMS");
final CssLayout layout = new CssLayout();
layout.addStyleName("main-layout");
layout.setWidth("100%");
Responsive.makeResponsive(layout);
// layout.setSpacing(true);
// layout.setMargin(true);
setContent(layout);
layout.addComponent(personalInfo);
// layout.setComponentAlignment(personalInfo, Alignment.BOTTOM_RIGHT);
layout.addComponent(claimsProduct);
// layout.setComponentAlignment(claimsProduct, Alignment.BOTTOM_RIGHT);
}
public static void setTitle (String newTitle)
{
Page.getCurrent().setTitle(newTitle);
}
public static void setSearchEnable ( boolean option ) { personalInfo.setSearchEnable(option); }
}
my personal info UI.. which is my
But it doesnt work..
What is the width of the panel? If you set the width on the server-side it's most likely overriding the SCSS.