Hi everybody,
i’m still struggling with the grid layout of the f7 framework, and it’s somehow driving my nuts.
My goal is simple to creat a two column row where the first column has the automatic width of its content, and the second column fills the remaining content:
This is what i have so far:
uid: Garten_Cell
tags: []
props:
parameters:
timestamp: May 10, 2021, 10:50:27 AM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
backgroundImage: url(/static/Garten_comic.jpg)
backgroundPosition: center
backgroundSize: cover
backgroundBlendMode: overlay
background-color: "#ffffffc0"
slots:
header:
- component: Label
config:
text: Garten
style:
color: black
content:
- component: f7-row
config:
class:
- no-gap
slots:
default:
- component: f7-col
config:
style:
background: blue
width: auto
slots:
default:
- component: f7-icon
config:
f7: '=(items["Irrigation_Switch"].state === "ON") ? "drop_fill" : "drop"'
color: blue
size: 20px
- component: f7-col
config:
style:
background: yellow
slots:
default:
- component: oh-link
config:
action: toggle
actionItem: Irrigation_Switch
actionCommand: '=(items["Irrigation_Switch"].state === "ON") ? "OFF" : "ON"'
text: Bewässerung
style:
color: black
footer:
- component: Label
config:
text: Hier steht dann der Footer
style:
color: black
and the result looks like:
(don’t worry the ugly colors - they shall help me with the layout)
I don’t see a way to tell the second column to have a flexible width (auto sets it to the width of the text, and --webkit-fill-available will set it to the width of the cell)
Ideally it shall look like:
(i’ve used 10% and 90% width, but that would make the first column not a fixed size)
Can someone give me a slight push in the right direction?