Button Group on small screen

General
1

This button group is size 6x1 and in landscape on my Android phone (Firefox) it looks like this

image
image1000Ă—462 63.6 KB

In portrait though it's like this. There is the merest hint of a (vertical?) scroll bar which does not show in the screen capture, but I can find no way to get to the missing two buttons, and the rounded end after the green icon implies that the entire widget is displayed.

image
image462Ă—1000 50.9 KB

Is there any way to access the right hand buttons?
Should there be a visible indication that this widget is not fully displayed - even a horizontal scrollbar?

2

By default it should wrap like this

image
image425Ă—240 6.69 KB

CSS override somewhere?

3

Ah.

Yes, actually it has your nice CSS from button-group-nodes-no-change-of-states only with more garish colours.

Doesn't seem to make a difference when I disable that CSS though.

4

And you are up to date with the dashboard version?

5

1.22.1 yes.

6

Find this element and let's see..

image
image1843Ă—791 116 KB

7

I don't know how to do that on my phone, but on my PC that line is identical to what you show except I don't see == $0
(No colours because your CSS disabled)

image
image1919Ă—794 109 KB

8

Make a new screenshot, leave my CSS in, and show lines a little bit above the target element just like I did.

9

Oh, no need. There's another bug. Firefox doesn't wrap.

10

Add those to the CSS

.btn-grp-colored-icons button{
    min-height: var(--widget-row-height);
    height: auto;
}
.btn-grp-colored-icons .v-btn-group{
    height: unset !important;
}

Or if you don't want it to wrap on small screens and the content fits nicely (and remains usable when squeezed)

.btn-grp-colored-icons button{
    min-height: var(--widget-row-height);
    height: auto;
    min-width: unset;
    padding: 0 0 0 0;
}
.btn-grp-colored-icons .v-btn-group{
    height: unset !important;
    width: 100%;
    flex-wrap: nowrap !important;
}
1 Like
11

That is outstanding, thank you @hotNipi.

It works well for text labels too, within reason. I like that the available space is allocated to buttons according to each label length.

image
image1080Ă—1106 77.5 KB

I think that 6 buttons across a phone screen in portrait is about right, they have roughly the same size as desktop icons.

Still fails if I use provocatively long labels or combine text and icons, would be nice if it could somehow indicate the display is not complete. Even so, it's better than wrapping to a second line IMHO.

This solution or something like it should be the default behaviour. Any thoughts @joepavitt ?

image
image1026Ă—540 86.5 KB

12

I think no.
By default it should wrap. Otherwise not fitting situation (which will happen almost always) is an issue. And it should have paddings surrounding the readable content because of web standards. And that brings the need of the wrapping closer.

What maybe is reasonable is to have tickbox to turn wrapping off.

1 Like
13

You also need to watch out for accessibility issues. Might not be a problem for home use but would certainly be an issue for public use, especially in the EU and UK where there are laws covering accessibility of websites.

Buttons for touch devices need to be a minimum size.

1 Like
14

Just to extend this, the initial request for the wrapping come from someone that had 96 buttons in a single button group... so I think wrapping is a sensible default here.

1 Like