With HABPanle, I have something similar to this,
No, I like to create a mainUI widget which looks similar. But I haven’t found any trick yet to span the first column across multiple rows without increasing the space between the cols too much.
Anyone an idea?
I don’t have much experience with the MainUI widgets yet, but my suggestion would be to look at the margin and padding settings on the column. I think the best thing would be to load the page in the browser and then use the ‘Developer Tools’ within the browser to inspect the element where you should be able to override the CSS values and also look at the box model.
I got it working, so far.
Code:
uid: ThermometerList
tags: []
props:
parameters:
- description: Beschreibung Thermometer 1
label: Thermometer
name: meterName1
required: false
type: TEXT
- context: item
description: 1. Thermometer
label: Thermometer
name: thermometer1
required: false
type: TEXT
- description: Beschreibung Thermometer 2
label: Thermometer
name: meterName2
required: false
type: TEXT
- context: item
description: 2. Thermometer
label: Thermometer
name: thermometer2
required: false
type: TEXT
- description: Beschreibung Thermometer 3
label: Thermometer
name: meterName3
required: false
type: TEXT
- context: item
description: 3. Thermometer
label: Thermometer
name: thermometer3
required: false
type: TEXT
- description: Beschreibung Thermometer 4
label: Thermometer
name: meterName4
required: false
type: TEXT
- context: item
description: 4. Thermometer
label: Thermometer
name: thermometer4
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 28, 2021, 8:42:51 AM
component: f7-card
config:
style:
border-radius: 20px
background-color: rgba(6,25,36)
--text-color: rgba(255,255,255,1)
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
style:
width: 100%
height: 100%
position: absolute
top: 0
left: 0
border-radius: 20px
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 20%
class:
- padding-top
- padding-bottom
slots:
default:
- component: oh-image
config:
url: /static/icons/thermometer.svg
height: 100px
- component: f7-col
config:
style:
width: 40%
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName1 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-top
- text-align-right
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName2 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName3 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName4 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-bottom
- component: f7-col
config:
style:
width: 40%
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer1].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-top
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer2].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer3].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- text-align-right
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer4].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-bottom
- text-align-right
The only point I struggle with is the text-alignment.
Neither using
config:
style:
text-align: right
nor using
config:
class:
- text-align-right
seems to have an effect for the temperatures as you can see in the picture above.
Anyone any idea?