Oh-grid-col width not applied on smartphone

Add-ons UIs
1

Hello!
i would like to use make a responsive overview page and i’m at a good point when displaying on PC (FHD) but i’m not able to make the column width adaptive on smartphone:

        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  large: "20"
                  xlarge: "20"
                  medium: "50"
                  width: "33"
                  xsmall: "50"
                  small: "50"
                slots:

on PC the column width is 20 but on smartphone the width is 33 so i understand that on smartphone the mainUI sets the witdth for “width”. took a screenshot on the phone and resolution is 864x1872px.

according to oh-grid-col - Layout Grid Column | openHAB that should mean app width >= 720px and the value for “medium” (50) should be applied, right?

2

It is the other way round:

- component: oh-grid-col
  config:
  width: "50"
  xsmall: "25"

Don’t ask me why but with this setting my computer browser shows 4 controls in a row (25%) and on an iPhone 2 controls (50%)

3

It’s all explained here:

That’s why you may find yourself wanting to let a column be 100% by default, so that it occupies the entire screen, and then reduce the width for medium or large breakpoints.

in other words, width is for the smallest screen on which you want to display the page. Then you define breakpoints to determine when your single column layout becomes 2-column, or 3, or more. Most smartphone screen widths are actually < 480px (equivalent pixels, not actual, it’s influenced by “retina” pixel densities etc.) so below even the xsmall breakpoint.

1 Like
4

In fact if you go to the About page while logged in, then Technical Information > Details, you will see the dimensions of your screen as seen by the UI:

InkedScreenshot_20211107_231623_com.android.chrome_LI
InkedScreenshot_20211107_231623_com.android.chrome_LI1080×2340 131 KB

So in this case while the actual screen resolution is 1080x2340, the pixel ratio is 3 so the “perceived” screen size is a third of that in every dimension, so 360x780. Hope it makes sense.

1 Like
5

that explains everything. thanks a lot, Yannick

6

aha! so the “app width” in this case would be 360, right? thank you very much!