Button not hiding in small screen

Flow
1

I created a button using code below

Button close = new Button(VaadinIcon.CLOSE.create(), e -> close());
        close.addClassNames(Margin.Vertical.NONE, Display.FLEX, Display.Breakpoint.Small.HIDDEN);

This is to hide it in small screens but instead it is showing up in smaller screen but hiding in large. This is what I see in DEV tools

<vaadin-button class="my-0 flex sm:hidden" theme="icon tertiary" aria-label="Close sidebar" tabindex="0" role="button" aria-describedby="vaadin-tooltip-395"><vaadin-icon icon="vaadin:close" slot="prefix"></vaadin-icon><vaadin-tooltip slot="tooltip"><div slot="sr-label" id="vaadin-tooltip-395" role="tooltip">Close sidebar</div></vaadin-tooltip></vaadin-button>

image
image1305×283 28.3 KB

What am I missing here ?

2

Sounds like a misunderstanding on how breakpoints work. Where did you specify the buttons visiblilty above small?

3

The breakpoint-utilities like Display.Breakpoint.Small each define a minimum viewport width above which the style is applied. In the case of Small, the breakpoint is defined as min-width:640px, i.e. it applies when the viewport is 640px or bigger, which is still quite small, but it won’t apply below 640px.

So I think what you need to do is set it to Hidden by default, and then back to visible on Small or Medium or wherever you want it to start showing:

addClassNames(Display.HIDDEN, Display.Breakpoint.Small.INLINE_BLOCK)

I’m not sure if it’s “correct” that those breakpoints only define a min-width rather than a min/max range, and that the smallest one (that we currently have) doesn’t have its min-width at 0, as I’m not really a big user (or fan) of utility classes in general…