Hello,
I started to try do do my own widget. I have a problem with the alignment.
The widget consists of two lines . Each line has a button and a stepper.
But the components in bot lines are not aligned to each other.
uid: ck_heating_two
tags: []
props:
parameters:
- default: RoomName
description: Room name
label: Room Name
name: title
required: true
type: TEXT
- context: item
description: Aktuelle Tempertur Item
label: ItemCurrentTemp
name: itemCurrentTemp
required: true
type: TEXT
- context: item
description: Soll Tempertur Item
label: ItemSollTemp
name: itemSollTemp
required: true
type: TEXT
- context: item
description: Time 1 item
label: ItemSollTime1
name: itemSollTime1
required: true
type: TEXT
- context: item
description: Time 2 item
label: ItemSollTime2
name: itemSollTime2
required: false
type: TEXT
- context: item
description: Time 3 item
label: ItemSollTime3
name: itemSollTime3
required: false
type: TEXT
- context: item
description: Time 4 item
label: ItemSollTime4
name: itemSollTime4
required: false
type: TEXT
- context: item
description: Soll Temperature time 0 item
label: ItemSollT0
name: itemSollT0
required: false
type: TEXT
- context: item
description: Soll Temperature time 1 item
label: ItemSollT1
name: itemSollT1
required: false
type: TEXT
- context: item
description: Soll Temperature time 2 item
label: ItemSollT2
name: itemSollT2
required: false
type: TEXT
- context: item
description: Soll Temperature time 3 item
label: ItemSollT3
name: itemSollT3
required: false
type: TEXT
- context: item
description: Soll Temperature time 4 item
label: ItemSollT4
name: itemSollT4
required: false
type: TEXT
timestamp: Dec 27, 2023, 1:49:30 PM
component: oh-list-card
config:
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- align-items-left
slots:
default:
# show current and soll temp
- component: oh-button
config:
class: margin
text: = + items[props.itemCurrentTemp].state + "°C (" + items[props.itemSollTemp].state + "°C)"
#- component: Label
# config:
# text: test
# stepper to change soll temp
- component: oh-stepper
config:
class: margin
item: =props.itemSollTemp
- component: oh-button
config:
- component: f7-row
config:
class:
- align-items-left
slots:
default:
- component: oh-button
config:
item: =props.itemSollT1
text: ="Manual On / Off for " + items[props.itemManOnTime].state + " hours"
#text: "test"
class: margin
#color: "=props.colorButton ? props.colorButton : ''"
#outline: true
#action: command
#active: "=props.exampleModeItem ? (items[props.exampleModeItem].state === loop.buttonlabel ? true : false) : ''"
#actionCommand: =loop.buttonlabel
#actionItem: "=props.exampleModeItem ? props.exampleModeItem : ''"
- component: oh-stepper
config:
class: margin
item: =props.itemManOnTime
I don’t know why the first stepper is not on the right edge resp, why the second stepper is there.
Thank you,
Chris