Адаптивный макет Vaadin не работает

Я использую новую версию 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