Hi Rainer,
I just noticed that the code here for the darkLiquid_card, which looks pretty nice, works fine until you switch on the trendline. In that case
It seems the trend overlaps the whole widget and therefore covers the controls:
Interestingly the slider works well.
Any idea, why that is the case and how it could be fixed?
Hello, how do i get rid of those circles/dots and dashes ?
They are appearing in between f7-col <-> f7-col and the dashes between f7-row <-> f7-row.
uid: DummyWidget
tags: []
props:
parameters:
- description: Title
name: title
required: false
type: TEXT
- context: item
description: Wassertemperatur Item
name: pool_temp
required: false
type: TEXT
- context: item
description: Umwälzpumpe Item
name: pool_pump
required: false
type: TEXT
- description: Umwälzpumpe Name
name: pool_pump_name
required: false
type: TEXT
- context: item
description: Poolbeleuchtung Item
name: pool_lights
required: false
type: TEXT
- description: Poolbeleuchtung Name
name: pool_lights_name
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 6, 2022, 11:48:49 AM
component: f7-card
config:
title: '=props.title ? props.title : "Set props to test!"'
style:
background-color: '=items[props.pool_temp].state.split(" ")[0] > 24.5 && items[props.pool_temp].state.split(" ")[0] < 27.5 ? "rgba(127,255,0,0.3" : items[props.pool_temp].state.split(" ")[0] > 27.5 ? "rgba(255, 69, 0,0.3)" : "rgba(0,0,255,0.3)"'
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
padding: 5px
noShadow: false
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
- text-align-center
- no-hairlines
style:
padding-top: 10px
slots:
default:
- component: f7-col
config:
width: 100
xsmall: 33
small: 33
resizableHandler: false
slots:
default:
- component: oh-icon
config:
icon: light
height: 30
- component: f7-col
config:
width: 100
xsmall: 33
small: 33
slots:
default:
- component: oh-label-item
config:
resizableHandler: false
title: '=props.pool_lights_name ? props.pool_lights_name : "Bitte props einstellen"'
style:
font-size: 15px
font-weight: 500
margin-left: 0px
- component: f7-col
config:
width: 100
xsmall: 33
small: 33
slots:
default:
- component: oh-toggle-item
config:
item: =props.pool_lights
style:
transform: scale(1.1)
- component: f7-row
config:
class:
- justify-content-center
- text-align-center
- no-hairlines
slots:
default:
- component: f7-icon
config:
f7: thermometer
color: red
size: 30
style:
margin-top: 10px
- component: f7-row
config:
class:
- justify-content-center
- no-hairlines
slots:
default:
- component: f7-col
config:
width: 100
xsmall: 100
small: 100
slots:
default:
- component: oh-label-item
config:
item: =props.pool_temp
style:
text-align: center
font-size: 25px
font-weight: 500
margin-left: 0px
- component: f7-row
config:
style:
padding-bottom: 10px
slots:
default:
- component: f7-col
config:
width: 100
xsmall: 100
small: 100
slots:
default:
- component: oh-label-item
config:
title: Wassertemperatur
style:
text-align: center
font-size: 20px
font-weight: 500
- component: f7-row
config:
class:
- justify-content-center
- text-align-center
- no-hairlines
slots:
default:
- component: f7-col
config:
width: 100
xsmall: 33
small: 33
slots:
default:
- component: oh-icon
config:
icon: pump
height: 30
- component: f7-col
config:
width: 100
xsmall: 33
small: 33
slots:
default:
- component: oh-label-item
config:
title: '=props.pool_pump_name ? props.pool_pump_name : "Bitte props einstellen"'
style:
font-size: 15px
font-weight: 500
margin-left: 0px
- component: f7-col
config:
width: 100
xsmall: 33
small: 33
slots:
default:
- component: oh-toggle-item
config:
item: =props.pool_pump
style:
transform: scale(1.1)
All of these appear because you are using the -item widgets. The item widgets are intended to be used only as the children of a list (oh-list-card, oh-list, or f7-list). If they are placed without a list as a parent you get the improper formatting of the element.
See the docs for the list of components that are available to you and note for for each of the -item widgets, there’s a regular widget you can use instead without the list formatting issues.*
*- The one exception that is not in the docs is the one for making labels. The widget to use for just placing text, such as an Item state, is Label which takes only text and style properties.
