Hi All
I have another layout problem with a bigger widget.
I have a popup widget that is based on my other working examples. I noticed that the layout between a PC and a Tablet/Mobile device is different.
So to try and debug I have cut down the “offending” components to the following:
uid: Test_List
tags: []
props:
parameterGroups: []
timestamp: May 10, 2023, 10:28:22 AM
component: f7-block
config:
style:
border: 1px solid black
border-radius: 10px
height: 720px
left: 0px
margin: 0
padding: 0
position: absolute
top: 0px
width: 360px
slots:
default:
- component: f7-list
config:
class:
- padding-top
slots:
default:
- component: oh-toggle-item
config:
color: black
item: ShellyEM_MAINS_TotalEnergy_Switch
style:
--f7-toggle-height: 20px
--f7-toggle-width: 50px
font-size: 13px
title: Store current EM Mains reading
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Usage last Month - "
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Last Stored - "
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Now - "
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Usage this Month - "
Which produces (on PC):
However if I remove:
class:
- padding-top
I end up with:
I don’t think I need the padding, and suspect it may be “causing” the layout differences?
I have looked at the “inspect” from Chrome, but can’t figure the cause.
Any advise?
Thanks
EDIT:
So I added another block to demonstrate the layout issue between PC and Device:
uid: Test_List_1
tags: []
props:
parameterGroups: []
timestamp: May 10, 2023, 11:02:33 AM
component: f7-block
config:
style:
border: 1px solid black
border-radius: 10px
height: 720px
left: 0px
margin: 0
padding: 0
position: absolute
top: 0px
width: 360px
slots:
default:
- component: f7-block
config:
style:
border: 1px solid black
border-radius: 10px
height: 220px
left: 0px
margin: 0
padding: 0
position: absolute
top: 500px
width: 360px
slots:
default:
- component: f7-list
config:
class:
- padding-top
slots:
default:
- component: oh-toggle-item
config:
color: black
style:
--f7-toggle-height: 20px
--f7-toggle-width: 50px
font-size: 13px
title: Store current EM Mains reading
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Usage last Month - "
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Last Stored - "
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Now - "
- component: oh-list-item
config:
color: black
style:
font-size: 13px
title: = "Usage this Month - "
Produces on PC:
and on Device:
Using the Developer Tools to simulate a Device produces correct output too?
EDIT 2: I am now officially very confused. Recreated the f7-list component manually and it works now?
Ran a diff between the two versions and can’t see anything unexpectedly diiferent?
