[BasicUI] Buttongrid alignment issue on the web browser

[jimtng]

Which UI are you reporting an issue for?

• Basic UI
• HABPanel
• HABot
• CometVisu

The problem

When we have a Buttongrid after some other widgets, it seems to not have a left margin, and as a result, it is not aligned the same way as the rest of the widgets on the page

Expected behavior

It should be aligned like this:

Steps to reproduce

1. Create a sitemap with some normal widgets, followed by a buttongrid

sitemap test {
  Frame {
    Default item=TestDimmer
    Default item=TestDimmer
    Buttongrid item=Testicon buttons=[1:1:cmd=Cmd]
    Default item=TestDimmer
  }
}

It is not necessary to have other widgets, nor to enclose it in a Frame. Even with a single lone buttongrid it's happening, but we can't see the problem easily because we have no "frame of reference".

Your environment

MacOS 13.6.3 on Chrome Version 120.0.6099.129 (Official Build) (arm64)

Browser console

GET http://192.168.1.10:8484/icon/buttongrid?iconset=classic&format=svg&anyFormat=true 404 (Not Found)

I did not specify any icons so this request for buttongrid icon is weird.

[jimtng]

It seems that this is the cause of the problem:

openhab-webui/bundles/org.openhab.ui.basic/web-src/_layout.scss

Line 119 in 5a09f71

margin: 0;

@lolodomo, what's the reason for setting margin: 0 here? When I removed it, the layout appears fine. I'll test some more with different number of columns.

[lolodomo]

I do not remember. I will have to compare the result with and without this margin properly.

[jimtng]

My quick tests seem to look fine. I built the bundle and installed it, then tried changing the settings to 1, 2, and 3 columns on desktop. I don't know how to test on tablet.

[lolodomo]

I don't know how to test on tablet.

Just reduce the width of your window.

[jimtng]

Ahh, I see that margin:0 is needed when the window is narrow. I'll try with @media.

BTW, how can I restore my bundle to the original one? I did this to install my custom bundle

openhab> bundle:update org.openhab.ui.basic file:///openhab/conf/org.openhab.ui.basic-4.2.0-SNAPSHOT.jar

[lolodomo]

GET http://192.168.1.10:8484/icon/buttongrid?iconset=classic&format=svg&anyFormat=true 404 (Not Found)

I did not specify any icons so this request for buttongrid icon is weird.

This is coming from the hidden header row. I will optimize the HTML code to not include a header row when I know it will never be shown.