Witam
Wie ktoś może jak za pomocą pluginu vaadinowego “responsive” zmienić rozkład komponentów z HorizontalLayout na dużym ekranie powyżej rozdzilczości 1366px na VerticalLayout poniżej tej rozdzilczości
Jest to opsiane na wiki:
https://vaadin.com/blog/-/blogs/responsive-layouts-with-vaadin-and-sass
Zasada jest taka, że na poziomie parent layouta (najlepiej csslayout) dopisujesz reguly w css jak maja byc ulozone komponenty zaleznie od rozdzielczosci.
Tutaj jeszcze masz webinarium na ten temat:
https://www.youtube.com/watch?v=YGar0pVeiz4
[code]
public class HorizUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = HorizUI.class, widgetset = "com.example.horiz.widgetset.HorizWidgetset")
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
new Responsive(this);
final CssLayout main = new CssLayout();
TextField firstname=new TextField("First name");
main.addComponent(firstname);
TextField lastname=new TextField("Last name");
main.addComponent(lastname);
TextField email=new TextField("Email");
main.addComponent(email);
setContent(main);
}
}
///////////Plik CSS
.v-csslayout[width-range~=“0-1366px”]
{
display:inline !important;
}
[/code]Nie działa mi nadal Tobie chodzi o umieszczenie różnych layoutów w CssLayout i je układanie?
final CssLayout main = new CssLayout();
new Responsive(main);
Nic się nie dzieję 
Nie dodałes też własnego stylu do layoutu:
final CssLayout main = new CssLayout();
main.addStyleName("test");W stylach:
.test[width-range~="461px-"]
{
background: red;
}
.test[width-range~="0-460px"]
{
background: blue;
}Widgetsety na pewno masz skompilowane? Ten addon jest w Core od chyba 7.2. Zawsze też w narzędziach developerskich przeglądarki możesz sprawdzić czy dodają się selektory od szerokości.
Kompilowałem Widgetsety zmienia mi się tylko raz kolor jest tylko czerwony nie zmienia się na niebieski mi zalezy na położeniu tych pól a nie na ich koloże żebym miał na małym ekranie jedeno pole textowe pod drugim, natomiast na dużym w jednej linii i display block i inline mie nie dziala.
No to już jesteśmy bliżej celu. Nie działa jeden z selektorów, ten od 0-460px. Sprawdz jaki tam selektor sie dodaje - w inspektorze przegladarki zaznacz element i zmniejszaj okno. Być może dodaje o inną nazwe. Z tego co pamietam był jakiś błąd w tym dodatku.
Natomiast co do wersji UI, dla danej rozdzielczości lepiej jest użyc @media query. Zobacz ten przyklad:
https://github.com/jounik/GWT.create-workshop/tree/result-eu
Tutaj masz jeszcze rozdział z ksiązki:
https://vaadin.com/book/vaadin7/-/page/themes.responsive.html
i przyklady
http://demo.vaadin.com/book-examples-vaadin7/book/#themes.responsive.basic
Czytałem te wszystkie artykuły dziła jak odświeżę strone zaraz spróbuję z rozkładem