Responsive layout looks incorrect when switching to landscape mode

Given a simple oh-page populated with standard oh-cells:

config:
  label: Home
  layoutType: responsive
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config:
            cols:
              "719": 2
              default: 5
          slots:
            default:
              - component: oh-cell
                config:
                  action: toggle
                  ...
              - component: oh-cell
                config:
                  action: toggle
                  ...

On my iPhone in portrait mode it works and looks as expected (cells are arranged by 2 cells per row)
When switching to landscape mode it shows 5 cells per row (as expected) but the width of the cell is wrong as can be seen here:

Can anybody confirm this or knows which config I need to change?

I don’t use any iDevices, so I can’t really help specifically. All I can say is that there have been numerous tweaks to the f7-card css with the new oh-card refactoring, and this, mostly likely, is a effect of one of those tweaks. As a result, it probably makes sense to file an issue in the UI repo.

I’m on OH 4.2.2 using non-responsive layout and seem to have the same problem using iPhone 13 mini.
I built a test page using f7-card to avoid issues with potential oh-card refactoring (mentioned by @JustinG)

iPhone 13 mini:
With iPhone 13 mini it works as expected in Portrait mode only. Landscape mode is broken somehow.

iPad 7th gen:
It works as expected with iPad 7th gen - both in Portrait and in Landscape mode.

Code:

config:
  label: Test_Layout
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "50"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "50"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "33"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "33"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "33"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "25"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "25"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "25"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
              - component: oh-grid-col
                config:
                  medium: "25"
                  width: "100"
                slots:
                  default:
                    - component: f7-card
                      config:
                        style:
                          display: flex
                          align-items: center
                          justify-content: center
                      slots:
                        default:
                          - component: Label
                            config:
                              style:
                                font-size: 30px
                                font-weight: 300
                              text: Test
masonry:
  - component: oh-masonry
    slots:
      default: []

Any other iPhone users having these issues?

@florian-h05 solved this problem in one of the latest milestone releases. I can’t remember if it is M4 or M5. In a few days there will be a 4.3 release if you want to wait for a non-milestone release.

Those few days will be tomorrow evening if everything works as expected.

2 Likes

Great news!

1 Like

I upgraded to OH 4.3 release.

Unfortunately, landscape mode is still broken with iPhone 13 mini - see this post

Have I missed something or is this a different problem/bug?
Thank you.

You need to provide more width parameters here. Have a look at the row’s menu (small black icon) in MainUI

You need to provide more width parameters here. Have a look at the row’s menu (small black icon) in MainUI
[/quote]

                config:
                  width: "100"

I’m well aware of the Column Options in MainUI. The example above is the one with which the full width should be used. This is what it does on iPad but not on iPhone 13 mini.

Here one example from my Overview page:

iPad (Landscape) - works as expected

iPhone13 mini (Portrait) - works as expected

iPhone13 mini (Landscape) → problem

I’ve no idea how I could possibly remove the big margins by changing column options… and, this looks pretty much like the problem from the screenshot in your first post.

Yaml (extract):

component: oh-grid-row
config: {}
slots:
  default:
    - component: oh-grid-col
      config:
        medium: "33"
        width: "100"
      slots:
        default:
          - component: widget:Enigma2
            config:
              CommandChannelDown: LEFT
              CommandChannelUp: RIGHT
              itemChannel: DreamboxDM8000_Channel
              itemChannelFavorites: DreamboxDM8000_Channel_Favorites
              itemMute: DreamboxDM8000_Mute
              itemPower: DreamboxDM8000_Power
              itemProgramDescription: DreamboxDM8000_Description
              itemProgramTitle: DreamboxDM8000_Title
              itemVolume: DreamboxDM8000_Volume
              title: Dreambox DM8000
    - component: oh-grid-col
      config:
        medium: "33"
        width: "100"
      slots:
        default:
          - component: widget:Denon AVR
            config:
              MaximumVolume: 18
              MinimumVolume: -80
              VolumeStepsize: 1
              itemInputSource: DenonAVR4310_MainZone_Input
              itemMute: DenonAVR4310_MainZone_Mute
              itemPower: DenonAVR4310_Power
              itemSendQuickSelectCommand: DenonAVR4310_SendQuickSelect
              itemSendSurroundProgramCommand: DenonAVR4310_SendSurroundProgram
              itemSendTunerPresetNumberCommand: DenonAVR4310_SendTunerPresetNumber
              itemSendTunerPresetUpDownCommand: DenonAVR4310_SendTunerPresetUpDown
              itemSurroundMode: DenonAVR4310_SurroundProgram
              itemVolumedb: DenonAVR4310_MainZone_VolumeDB
              title: Denon AVR-4310
    - component: oh-grid-col
      config:
        medium: "33"
        width: "100"
      slots:
        default:
          - component: widget:Daikin_HVAC
            config:
              MaximumTemperature: 32
              MinimumTemperature: 17
              TimerMaximum: 120
              TimerMinimum: 0
              TimerScaleSteps: 4
              TimerScaleSubSteps: 3
              TimerStep: 5
              hideSolarplant: false
              hideTimerFunction: true
              itemFanSpeed: DaikinACUnit192168040_fanspeed
              itemIndoorTemp: DaikinACUnit192168040_IndoorTemperature
              itemMode: DaikinACUnit192168040_Mode
              itemOutdoorTemp: gTempODAll
              itemPower: DaikinACUnit192168040_Power
              itemSolarplantACPower: KostalWechselrichter_ACPower
              itemSwing: DaikinACUnit192168040_FanSwing
              itemTargetTemp: DaikinACUnit192168040_SetPoint
              itemTimerDuration: ac_timer
              itemTimerSwitch: ac_timer_on_off
              title: BĂĽro

Have you reload the UI?

@florian-h05
I restarted openHAB many many times in the recent past. Thereby MainUI has certainly reloaded.

No, openHAB restart and Main UI reload are not the same.
Main UI has to be reloaded on the client on the about page.

Thanks for this info - I hadn’t thought about that.

Done on ALL clients → nothing changed (unfortunately)

I just checked again and was able to fix the issue with the code you posted above: Layout pages: Safe area fixes & related code improvements by florian-h05 · Pull Request #2959 · openhab/openhab-webui · GitHub
This will be included in 4.3.2

2 Likes

Will wait for 4.3.2 to enjoy the fix :grinning:

1 Like

I always wondered if the function on the about page does anything different or additionally compared to the result of closing/opening the browser or reloading a page?

„Reload“ only does only a location.reload(), so if your browser loads the page when accessing it and does not pull it from cache it is the same.
„Purge service worker and caches“ is, if available, the „better“ way of reloading Main UI after an upgrade.
But once you are on 4.3.0 automated Main UI reloading on upgrade should have improved.

1 Like

Partial success with OH 4.3.2

Do you think you can fix that part as well?

This looks correct - on the left side you have the notch and on the right there is the same safe area.

iPhone 13 mini:

Blue vs. orange:

  1. Assuming the notch “reduces the number of pixels” horizontally as if the the screen is cropped on the left side (orange). Why then have such a big safe area of the right side (blue)? It seems a bit like waste of space on the right side (blue). Why not reduce to “orange”?
  2. Alternatively, why not reduce the safe area from “blue” to “orange” on bothe sides. Everything would still be visible even though the notch is there. This would actually be my preference.

iPad:

Orange vs. red marks:
When comparing the safe areas, it seems as if iPhone uses more safe area (orange) than iPad (orange).

What do you think?