Оформлението Vaadin Responsive не работи

Използвам нова версия на Vaadin which is 7.4.5+

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

}

Моят стил

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

Защо моят дизайн не може да отговори на ширината, която трябваше да .. Опитах много примери във vaadin, но също не работи. И защо някои примери използват com.vaadin.addon.responsive.Responsive, но в моята версия на Vaadin, която вече е в помощната програма и импортирах com.vaadin.server.Responsive

Какво трябваше да направя?


person Forbidden    schedule 20.05.2015    source източник


Отговори (1)


Знам, че е малко късно и вероятно вече сте го решили, но...

Причината, поради която използват com.vaadin.addon.responsive.Responsive е, че Responsive преди беше разширение и по-късно го интегрираха в рамката.

Сигурни ли сте, че компонентът получава атрибута width-range? Отворете инспектора на браузъра си, погледнете компонента и вижте дали е там. Ако е така, тогава имате проблем с вашия CSS. Ако не е или е някъде другаде, уверете се, че сте го приложили към правилния елемент.

person Pere    schedule 12.07.2017