I’m trying my hand at my hand at my first MainUI widget, and I’ve got it working (mostly) how I want it to in the Widget Editor, it lets me control the 24 vertical sliders and even higlights the current hour.
Unfortunately though, the sliders get “crushed” when I actually try to include the widget in a page, I can’t move them and when I click on the knobs, the label “NaN” pops up…
These are non-semantic items. Is that the problem?
Here’s my code:
uid: profile_looper
tags:
- list
props:
parameters:
- description: Title on top
label: Title
name: title
required: false
type: TEXT
- context: item
description: Profile
label: profile core item
name: profilecore
required: true
type: TEXT
filterCriteria:
- value: Group
name: type
parameterGroups: []
timestamp: Jan 4, 2022, 10:53:34 PM
component: f7-card
config:
style:
position: relative
height: 400px
slots:
default:
- component: f7-block
slots:
default:
- component: Label
config:
text: = props.title
style:
font-size: 18pt
padding: 10px
- component: f7-block
config:
style:
position: aboslute
flex-direction: row
display: flex
height: 100%
top: 20px
left: 30px
width: 95%
slots:
default:
- component: oh-repeater
config:
fragment: true
for: item
sourceType: itemsInGroup
groupItem: =props.profilecore
slots:
default:
- component: f7-col
config:
style:
width: 100%
height: 200px
slots:
default:
- component: f7-row
slots:
default:
- component: oh-slider
config:
title: =loop.item.label
item: =loop.item.name
min: 0
max: 100
step: 1
scale: '=(loop.item.label == "00") ? true : false'
label: true
vertical: 1
style:
--f7-range-bar-active-bg-color: "=(dayjs().format('HH') == loop.item.label) ? 'red' : '' "
--f7-range-knob-color: "=(dayjs().format('HH') == loop.item.label) ? 'red' : '' "
- component: f7-row
slots:
default:
- component: Label
config:
visible: true
text: =loop.item.label + ":00"
style:
transform: rotate(-70deg)
position: relative
top: 30px
width: 1px
- component: Label
config:
text: Percentage
style:
position: absolute
transform: rotate(-90deg)
left: 5px
top: 210px
width: 1px
height: 1px