Widget scaling on phones and App

Add-ons UIs
1

I am a little baffled by an apparent error in the horizontal scaling of widgets in both Chrome and Firefox on my phone, in the App on my Android phone and on a larger screen on an iPad Pro but which doesn’t occur in a desktop browser in any of Chrome, Firefox or Edge.

Consider the following simple widget consisting of two 24px square buttons.

uid: Small_round_buttons
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Feb 8, 2024, 9:58:48 PM
component: f7-card
config: {}
slots:
  default:
    - component: oh-button
      config:
        round: true
        outline: true
        style:
          height: 24px
          width: 24px
          border-radius: 0px
          top: 0px
    - component: oh-button
      config:
        round: true
        outline: true
        style:
          height: 24px
          width: 24px
          border-radius: 0px
          position: absolute
          top: 24px
          left: 24px

a) the buttons should be square and b) arranged as they are, the second button should be immediately to the right of and immediately below the first button and on the desktop that is exactly what I get.
screenshot-openhabian_8080-2024.02.08-21_43_47

On the tablet / phone devices I get this
20240208_215246198_iOS

The vertical spacing is right but the button has been stretched horizontally so when the bottom button is indented by 24px the top button overlaps it.

These are very simple buttons. I can’t see what is causing this issue and it’s really messing up my UI. Any help would be very gratefully received.

2

Do you also see the error if you emulate a mobile device in the desktop browser?

3

Interesting idea, no I don’t.

It looks fine emulating a phone with a 760x360 viewport or an iPad Pro which is 1366x1024. I’ve tried it using both Chrome and Firefox, in the latter case specifically emulating my Galaxy S10. Everything looks as it should.

Needless to say, just shrinking the PC browser window to reduce the viewport to mobile sizes doesn’t cause the problem either.

This is odd. On any browser on a desktop it’s fine including on small viewports and emulating mobile devices. But on any mobile device, either Android or Apple, including one with a large viewport, and also in the Android Openhab app, there’s that same stretching problem.

4

That’s a shame, my feeling is that pretty much means the problem has something to do with the extra css that f7 is adding to the mobile display. Debugging mobile browser pages is a bit of a pain (I’m fighting with a similar problem in a completely different project right now as well), as you usually need to connect the mobile device via the appropriate debugging procotol/package to the desktop.

A couple of other things I might try to further localize the issue:

  1. What if you change the f7-card at the root of the widget to a plain old div?
  2. Same for the buttons?
  3. What if you set border-sizing to content-box for both buttons?
  4. What if you set left and right padding to 0 for both buttons?
5

Great suggestions Justin (some of which I’ll have to look up becasue my HTML and CSS knowledge is not that great). The fact that it’s the same across Android and Apple and for both Firefox and Chrome suggests to me at least that the issue lies with f7.

I’ll play with it over the weekend and report back.

6

Think I’ve cracked it!

It seems to be applying a min-width property of about 27px (the buttons were always stretched by, I think it was, exactly three pixels)

I was playing with your suggestions and when I tried to make the button smaller than 24px I noticed that they weren’t shrinking any more

Override that hidden CSS with a min-width property of 24px and hey-presto, the buttons are round again!

Thanks for the poke in the right direction.

1 Like
7

On iOS devices there is a safari extension available called „Web Inspector“. But maybe this its features might not be enough for you.

1 Like
8

iOS is not my comfort zone, so I was not familiar with that. I’ll take a look. Thanks.

9

Another one is Achoo HTML. But I find web inspector more elegant as GUI is in Chrome style.