Layout issue with ui-edgewise-meter

Dashboard
1

Hi,

Hoping I can get some guidance here with an alignment issue with the ui-edgewise-meter control. The problem I am having is that when I stack meters vertically they are all different sizes, it seems because the size of the meter depends on the length of the label.

image
image944Ă—2048 185 KB

I can't see how I can fix this in the dashboard layout. Is it fixable using CSS maybe, or is that just the way it is and I have to live with it?

Not looking for a full solution, just a pointer in the right direction.

Thanks
Steve

2

You could leave the label blank in the meter and add text widgets of size 1x1 in front of each one, with just the label there.

3

Try

.hotnipi-ewm-label {
min-width: 5rem;
max-width: 5rem;
}

Maybe just width: will work too, didn't try it. And pixel sizes probably too, but percentages didn't work.

image
image469Ă—193 14 KB

These are 3x1 widgets using 7rem.

1 Like
4

That's not a bad workaround for simple cases (like this display on my phone) but of course forces you to fix the size of the group otherwise you can get a layout break between a label and its meter. If only there was support for nested groups so each label and meter could be bound together.

It's also not very granular - 1x1 + 2x1 - but I don't want to seem ungrateful.

Thanks for the suggestion

5

That looks promising - I'll have a play with that.

Thanks

6

The basic implementation of all ui widgets should allow you to specify the layout and allocation of space between label and data.
Alas, it doesn't.