Widget display Issue

[Demusman]

Interface statistics does not fit when using 3 columns and it does not give the option to scroll over.

[Demusman]

Add Gateways, Services and Traffic Graphs too.

[franco]

If you want to play whack-a-mole with the CSS good luck. Esp. scrolling containers on a dashboard is pretty nasty UX.

If you want to use 3 columns but they don't fit your screen that's also a reason why less column options exist.


Cheers,
Franco

[Demusman]

That's you answer?? Really?
Don't worry about fixing it, just use 2 columns instead.
Nice.

[franco]

Two answers really. Both of them very empowering. 


Cheers,
Franco

[Demusman]

Emporing the fact that OPNsense UI will always be a mess.

[franco]

If you want to be obnoxious: fine. If you want to be helpful nobody is stopping you from doing a PR and putting your expertise on display here to good use instead.


Cheers,
Franco

[Demusman]

Obnoxious??
You mean like saying "yeah that feature exists but if it doesn't work right, don't use it."
Like that??

You can keep posting all you want, you've already proven my point.

[Fright]

I never cease to wonder why some people ask questions or ask for help in this manner (is it supposed to help or is it supposed to make the product better?)

Code: [Select]

opnsense-patch -a kulikov-a fb36aed

is this what you talking about?

[franco]

Technically https://github.com/kulikov-a/core/commit/fb36aed is ok, but I don't think the scroll really helps and the next person will complain about the change.

Ideally I'd like to avoid the table overflow and instead squash the contents further but I think that is a deeper issue that eventually requires replacing and redoing the dashboard and its widgets.


Cheers,
Franco

[Fright]

yep, its hard to guess, because @Demusman did not provide screenshot or some but i think that scroll is helps not to break elements in weird cases like long interfaces descriptions ("no scroll" test screenshot attached) - just as additional protection 

[franco]

Yep this is a general table-tag related oddity. div-tags would be a lot better but it takes too much time to spend core resources on this. (I have tried before and failed and it's ok to admit that.)


Cheers,
Franco

[axsdenied]

I'll start with, I'm far from a CSS expert but perhaps a quick hack may be just set the minimum width of each widget, weighted against number of columns.  i.e. in 3 column mode, which I also run, it isn't until about 1496px, full window width, that the interface widget begins to peep out of it's form.  In these conditions, set minimum widget with, preventing it from shrinking and creating text bleed over.

[Fright]

@franco fair enough. what about $.sortable->gridstack.js migration then?
(https://gridstackjs.com/)

[franco]

It looks shiny. But I don't want to encourage a POC because the issue is getting everything converted. Most legacy widgets should probably be shelved and rebuilt first and then rework the dashboard itself if none of the old widgets code is left.


Cheers,
Franco