Responsive Theme not working

Flow
1

Hey there, I am currently struggeling with responsiveness in Vaadin.

I copy-pasted the example from
Vaadin docs
 (after I tryed to get my own stuff working), but always the style for the smallest display width gets enabled to the label.

I am Using vaadin 8.1.7.
My MainUI has the Annotation ‘@Viewport(“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”)’ (maybe itll help).

Here are my sources in case you need them:

LoginPage (Class)


LoginPage (Stylesheet)

Thx for your help in advance.

2

I don’t immediately see anything wrong with your code. Can you try putting the responsive styles inside your main theme .scss file instead of a mixin?

-Olli

3

Same behaviour.
Styles from the width-range[0-300px]
always gets applied.

I tried removing the viewport, but didnt change a thing.

4

Have you checked that you don’t have an older precompiled .css file in your theme folder?

-Olli

5

Yes, I am working with on the fly compilation and my maven clean removes generated .css files from my sources dir.

So everything is clean.

6

Oh, I don’t think your Label necessarily has a width at all in this case. Can you try applying the same to the surrounding VerticalLayout instead?

-Olli

7

yes now it is setting the background color of the page corresponding to the width range.
Sure Responisveness only affects layouts.
Thats too the reason why it didnt worked on my previous attempt. because i added the style to the panel and not to a layout.

Thx for your help.
P.S.: Going to report that error of the Documentation to Vaadin :slight_smile:

8

I think it can affect non-layout components as well, but the Label in that case probably has undefined width, so trying to use width-range on it won’t work.

Just set it to e.g. width 100% and that should work as well (but it’s probably not what you want layout-wise).