Responsive Layout for smartphone screen appears different on a PC

Setup, Configuration and Use Widgets
1

I am trying to design my overview page in OH 3.4.2 in order to look good on smartphones. I am designing it on a PC as it is obviously easier but even if I make the browser window as narrow as possible, the arrangements of widgets on the PC browser looks different than the one on the smartphone.

I am wondering if there are some parameters that can be adjusted in the browser or in openhab ui settings in order to make the PC screen looking identical to the smartphone screen (It is not a big deal, as I can save the code at every step and refresh the page on the smartphone).

I attach the motivations of my question and a sample yaml code at the end of this message.

Thank you for your attention
Lionello

Details and yaml code follows

The reason for this request is that the default way in which oh-label-cell width is managed looks better on a smartphone screen compared to ‘oh-label-card’. I would like to find out the right parameters to make ‘oh-label-card’ widths look like oh-label-cell on the smartphone. The reason for using oh-label-card is that oh-label-cell does not allow to use taphold actions (corresponding to long click on a smartphone) and the visibility property leaves a white space in the UI (visibility works best if acting on layout components such as oh-grid-row or oh-grid-columns which can only contain cards).

Let me paste at the end of this message the yaml code of the test I am doing. I am comparing the behavior of oh-label-cell vs oh-label-card, in a situation that aims at simulating the smartphone screen.
At the minimum browser width, the 'oh-label-card’s behave in the same way on the PC and on the smartphone , while there are three ‘oh-cells’ on the PC screen and only two on the smartphone one.

config:
  label: Overview
blocks:
  - component: oh-block
    config:
      title: 4 columns with a single card
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: oh-label-Card 1
                        outline: false
                      slots: null
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  visible: true
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: oh-label-Card 2
                      slots: null
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: oh-label-Card 3
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: oh-label-Card 4
  - component: oh-block
    config:
      title: 4 cells
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-cell
                config:
                  title: oh-Cell 1
                slots: null
              - component: oh-label-cell
                config:
                  title: oh-label-Cell 2
                slots: null
              - component: oh-cell
                config:
                  title: oh-cell 3
              - component: oh-label-cell
                config:
                  title: oh-label-Cell 4
masonry: null
grid: null
canvas: null
2

It’s the nature of responsive design that it does NOT look the same on different devices.
It is supposed to adapt! Just think of the orientation: portrait on smartphone vs landscape on PC.

Longer answer: Well. There’s multiple parameters inside the F7 framework you can play with.
But it will require significant investment in terms of time to get familiar with it, I myself have only just started so cannot advise.

EDIT:
thought you wanted them to look the same. But Justin’s answer has hit the spot way better than mine

3

Chrome (and, I assume, most other modern browsers) has developer tools gives you access to exactly this function. On Chrome, press F12 to open the developer tools panel and at the top left of the panel there’s an icon that looks like a phone and screen together: image. Push this to change the browser window to a simulation of different device screens and orientations:

image
image469×936 56.9 KB

1 Like