Hi,
i wanted to create a custom list widget with one oh-toggle item and two oh-stepper items in a single row.
I searched through the web, cause I’m not so fimilar with HTML5 or other web techniques.
I managed to create that widget but the alignment of the items is wrong.
The oh-toggle and oh-steppers are vertically misaligned.
here is my code - I would be very grateful for help!
uid: two stepper new_V2
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: text_header
required: false
type: TEXT
- description: Name of the Icon (see https://framework7.io/icons/ for available icons)
label: F7 Icon
name: icon
required: true
type: TEXT
- context: item
description: An item to control
label: Pin-Item
name: PinItem
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 20, 2023, 10:46:55 AM
component: oh-list-item
config:
icon: oh:sunrise
title: Morgens Ein
slots:
after:
- component: f7-block
config:
style:
display: inline-flex
flex-direction: row
padding: 0px
height: 20px
gap: 20px
slots:
default:
- component: oh-toggle
config:
colorTheme: =props.color
- component: oh-stepper
config:
small: true
autorepeat: true
autorepeatDynamic: true
disabled: "=(items[props.PinItem].state === 'locked') ? true : false"
fill: true
item: =(props.item)
max: 23
min: 0
raised: true
round: true
step: 1
- component: oh-stepper
config:
small: true
autorepeat: true
autorepeatDynamic: true
disabled: "=(items[props.PinItem].state === 'locked') ? true : false"
fill: true
item: =props.prefix + "_SetTemperature"
max: 60
min: 0
raised: true
round: true
step: 15
