hmerk
(Hans-Jörg Merk)
November 22, 2020, 11:49am
1
I am trying to create a custom widget for the Eurotronic Spirit Thermostats, having two knobs in one row for setting both target temperatures.
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: f7-col
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointHeat
- component: f7-col
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointEco
How can I center both knobs within the row or in their columns ???
@RGroll or @ysc any hint ???
RGroll
(Rainer)
November 22, 2020, 12:21pm
2
You can use text-align on the f7-row for this:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointHeat
- component: f7-col
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointEco
hmerk
(Hans-Jörg Merk)
November 22, 2020, 12:47pm
3
Thanks Rainer,
tried many params, but not this one. Great !!!
ysc
(Yannick Schaus)
November 22, 2020, 2:05pm
4
A few more things:
These F7 classes are just adding the corresponding CSS attributes so display-flex
(class) => display: flex
(CSS), align-content-center
=> align-content: center
and so on
You can’t use justify-content-*
without display-flex
f7-col
is mostly useful when you want responsive layouts, i.e. 1 column by default (mobile) but 2 columns on medium screens and above. To center, apply both display-flex
and justify-content-center
to the column itself:
So you’d have:
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 100
medium: 50
class:
- display-flex
- justify-content-center
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointHeat
- component: f7-col
config:
width: 100
medium: 50
class:
- display-flex
- justify-content-center
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointEco
You’ll see how it adapts on smaller screens.
Note that that’s also the purpose of the “blocks/row/col” hierarchy in layout pages.
If you don’t need that responsive layout (but why wouldn’t you?), then you can simply use flexbox and get rid of the columns altogether.
- component: f7-block
config:
# Using the CSS styles directly instead of the classes
style:
display: flex
justify-content: space-around
flex-wrap: wrap
slots:
default:
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointHeat
- component: oh-knob
config:
min: 16
max: 30
step: 0.5
size: 150
item: =props.itemSetpointEco
Flexbox is hard but this article illustrates it nicely:
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also...
Est. reading time: 10 minutes
2 Likes
hmerk
(Hans-Jörg Merk)
November 22, 2020, 2:40pm
5
Thanks Yannick, so I have to read some stuff and can optimize my custom widgets before finally releasing them…