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.
STSC
October 3, 2024, 2:44pm
4
Is this possible in the meantime to have many widgets/card below each other in one column?
JustinG
October 3, 2024, 2:58pm
5
In the end, nearly all components just render to one or more html elements. When you are creating something complex with components, it helps to have some idea what it means for the underlying html. Most of the column options you have are just simple containers (an html element that exists only to hold and organize its child elements). The f7 containers default to either basic block display or flexbox for the placement and alignment of children, so if you want to know how to get multiple components in a column it’s best to understand a little of how flexbox works. There are hundreds of good flexbox explanations out there: this is one of my favorites:
