helipus
December 8, 2021, 9:16pm
1
The documentation says:
But I would like to host more then one widget in each oh-grid-col.
Any solution to this?
config:
label: Overview TEST
layoutType: responsive
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
large: "25"
medium: "50"
width: "100"
xsmall: "100"
slots:
default:
- component: widget:weatherCard
config:
bigCard: true
dateFormat: true
sunIndicator: true
- component: widget:widget_time-series_1item
config:
item: OneCallAPIweatherandforecast_Current_Temperature
title: Außentemperaturverlauf
ylabel: "Außentemperatur "
- component: oh-grid-col
config:
large: "25"
width: "100"
xsmall: "100"
slots:
default:
- component: widget:widget_abfall
config: {}
- component: widget:widget_calendar_family
config: {}
- component: oh-grid-col
config:
large: "25"
width: "100"
xsmall: "100"
slots:
default:
- component: widget:widget_all_motions
config: {}
- component: widget:widget_all_services
config: {}
- component: oh-grid-col
config:
large: "25"
width: "100"
xsmall: "100"
slots:
default:
- component: widget:widget_all_warnings
config: {}
- component: widget:mailbox-full
- component: oh-toggle-card
config:
title: Paketbox
item: Paketbox_Voll
masonry: []
grid: null
canvas: null
I think you should declare how many columns you’d like to have in every single row and then copy and paste the row themselves…
uid: widget_antifurto_v4bis
tags: []
timestamp: Dec 8, 2021, 11:59:11 AM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
hideStatusbarOnOpen: false
class:
- card-expandable-animate-width
- card-outline
style:
height: 220px
width: auto
margin-left: 0px
margin-right: 0px
margin-top: -25px
margin-bottom: -25px
--f7-card-outline-border-color: "=items.Allarme_stato_inserimento_print.state === 'Inserito' ? 'red' : ''"
//box-shadow: var(--f7-card-expandable-box-shadow)
slots:
default:
- component: Label
config:
text: Opzioni
style:
color: gray
position: absolute
top: 0
right: 3%
padding-top: 190px
padding-bottom: 35px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: f7-row
config:
style:
width: 100%
height: 0px
class:
- display-flex
- flex-direction-row
- justify-content-flex-end
- align-items-baseline
slots:
default:
- component: f7-col
config:
style:
width: auto
padding-right: 5px
slots:
default:
- component: f7-icon
config:
f7: speaker_3
size: 15px
- component: f7-col
config:
style:
width: auto
padding-right: 5px
slots:
default:
- component: f7-icon
config:
f7: speaker_slash
size: 15px
- component: f7-col
config:
style:
width: auto
slots:
default:
- component: f7-icon
config:
f7: timer
size: 15px
- component: f7-icon
config:
material: lock
size: 180px
color: red
style:
position: absolute
right: 2%
top: 40px
opacity: 5%
- component: f7-block
config:
style:
margin-top: 0px
height: 200px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- align-items-center
- justify-content-space-between
- card-prevent-open
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
height: 75px
width: auto
class:
- display-flex
- flex-direction-column
- align-items-flex-start
slots:
default:
- component: Label
config:
text: Antifurto
style:
font-size: 25px
font-weight: 600
- component: f7-chip
config:
text: =items.Allarme_stato_inserimento_print.state
color: "=items.Allarme_stato_inserimento_print.state === 'Inserito' ? 'red' : 'gray'"
- component: f7-row
config:
style:
height: 100px
width: 100%
class:
- display-flex
- flex-direction-row
- justify-content-space-around
- card-prevent-open
slots:
default:
- component: f7-col
config:
visible: "=items.Allarme_stato_inserimento_print.state ==='Disinserito' ? true : false"
style:
width: 33%
height: 75px
class:
- display-flex
- flex-direction-column
slots:
default:
- component: oh-button
config:
action: toggle
actionItem: sonoff4ch_01Switch_Switch1
actionCommand: ON
actionCommandAlt: OFF
iconF7: person_crop_circle_badge_xmark
iconSize: 60px
style:
height: 60px
- component: Label
config:
text: Attiva totale
tion: toggle
actionItem: sonoff4ch_01Switch_Switch1
actionCommand: ON
actionCommandAlt: OFF
style:
font-size: 15px
font-weight: 600
class:
- text-align-center
- component: f7-col
config:
visible: "=items.Allarme_stato_inserimento_print.state ==='Disinserito' ? true : false"
style:
height: 75px
width: 33%
class:
- display-flex
- flex-direction-column
slots:
default:
- component: oh-button
config:
action: toggle
actionItem: sonoff4ch_01Switch_Switch1
actionCommand: ON
actionCommandAlt: OFF
iconF7: person_crop_circle_badge_checkmark
iconSize: 56px
iconColor: green
style:
height: 60px
- component: Label
config:
text: Attiva parziale
style:
font-size: 15px
font-weight: 600
class:
- text-align-center
- component: f7-col
config:
visible: "=items.Allarme_stato_inserimento_print.state ==='Inserito' ? true : false"
style:
height: 75px
width: 33%
class:
- display-flex
- flex-direction-column
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:keypad
actionModalConfig:
mask: "*"
closePopup: true
iconF7: person_crop_circle_badge_checkmark
iconSize: 60px
style:
height: 60px
- component: Label
config:
text: DISINSERISCI
style:
font-size: 15px
font-weight: 600
class:
- text-align-center
- component: f7-col
config:
visible: true
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =(((items.Ard_allarme.state) - 13)*-1)
margin-top: px
style:
font-size: 45px
font-weight: 600
class:
- text-align-center
- component: Label
config:
text: Sensori aperti
style:
font-size: 15px
font-weight: 600
In this examples I’ve put 3 columns (each of them with a width of 33%) in a single row; You can easily set 4 or more columns (changing consequently their width) and then copy and paste the row as many time you want.
helipus
December 9, 2021, 12:03pm
3
Thanks for your helf and effort.
