Oliver2
February 8, 2021, 10:45pm
1
going crazy about this. I can’t get it to be vertically aligned in the middle AND the grid cell filled with a different color.
It either looks like this (vertically aligned in the middle but no cell fill):
or like this (vertically aligned top but cell fill)):
what am I doing wrong?
- component: f7-row
config:
style:
height: 35px
align-items: center
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Test
- component: f7-col
config:
style:
background: "#222222"
text-align: center
align-items: center
slots:
default:
- component: Label
config:
text: Test2
style:
height: 35px (adding or deleting this line toggles between the above results)
DrRSatzteil
February 10, 2021, 8:21am
2
I think you should set your column height to 100% in the centered case. Looks as if the height was smaller and thus the fill is also smaller.
Oliver2
February 10, 2021, 5:52pm
3
Unfortunately this does not solve the problem. Result is same to picture 1
DrRSatzteil
February 10, 2021, 8:56pm
4
Then try this:
- component: f7-row
config:
style:
height: 35px
align-items: center
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Test
- component: f7-col
config:
style:
height: 100%
background: "#222222"
class:
- display-flex
- justify-content-center
- align-items-center
slots:
default:
- component: Label
config:
text: Test2
style:
color: white
1 Like
Oliver2
February 11, 2021, 6:10pm
5
thanks. did not work, but when I added
class:
- display-flex
- justify-content-center
- align-items-center
to the Label component it worked. Thanks for the hint
DrRSatzteil
February 11, 2021, 6:19pm
6
Hmmmm, what I posted did work for me. But anyway, if you solved your problem that’s fine
