I created a page like this :
my problems is, that on the mobile phone it’s wrong displayed :
looks like a pictures aren’t resized but background windows is resized.
My idea is, that also background windows isn’t resized and widgets are shown below
How to configure ?
Use the column options as described in the docs to make your widget full size on a smaller screen
makes me crazy. I read a ten times and did a lot of tests, but widgets are still resizing and deformed. Don’t know what I’m doing wrong. 
Maybe best for me will be, when witget (or window under widget) will have still the same size.
Looks like that only background window is resizing but widget picture is still the same :
Maybe complete overview page definition is wrong or somethink in the widget is missing
It will be much easier for us to help you if you show us all the code you are using.
sure, no problem, which code. Of the overview page where widget is or widget code or both ?
Mostly the widget, but also the page if you’ve done anything unusual instead of just configuring it from the UI page builder.
No, I added a widget as usual (Ihope) via + on the overview page. But to be sure sending also page code:
config:
label: Overview
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default: []
- component: oh-grid-row
config: {}
slots:
default: []
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:PV_widget_by_ALDA
config:
Grid_L1: ModbusDataGridL1820_ValueasNumber
complete_L1: Spotreba
pv_leistung: ModbusPVPower850_ValueasNumber
batterieleistung: ModbusData_ValueasNumber
batterylevel: BatterySOC_ValueasNumber
Grid_L2: ModbusDataGridL2821_ValueasNumber
Grid_L3: ModbusDataGridL3822_ValueasNumber
- component: oh-grid-col
config: {}
slots:
default: []
- component: oh-grid-col
config: {}
slots:
default: []
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default: []
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
item: ModbusDatarelay1806_ValueasSwitch
title: BOJLER
footer: 1=OFF / 0=ON
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-toggle-card
config:
item: shelly11921680123_Napajeni
title: Prodlužovačka
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: RELÉ 2
item: Relay_2_status
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_kuch
action: analyzer
actionAnalyzerItems:
- real_kuch
title: TEPLOTA KUCHYŇ
item: real_kuch
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_oby_ter
action: analyzer
actionAnalyzerItems:
- real_oby_ter
title: TEPLOTA OBYVÁK T
item: real_oby_ter
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_oby_l_o
action: analyzer
actionAnalyzerItems:
- real_oby_l_o
title: TEPLOTA OBYVÁK LO
item: real_oby_l_o
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_prac_ul
action: analyzer
actionAnalyzerItems:
- real_prac_ul
title: TEPLOTA PRACOVNA UL
item: real_prac_ul
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_pok_jach
action: analyzer
actionAnalyzerItems:
- real_pok_jach
title: TEPLOTA POK JÁCHYM
item: real_pok_jach
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_loz
action: analyzer
actionAnalyzerItems:
- real_loz
title: TEPLOTA LOŽNICE
item: real_loz
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_pok_jak
action: analyzer
actionAnalyzerItems:
- real_pok_jak
title: TEPLOTA POK JAKUB
item: real_pok_jak
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_pok_host
action: analyzer
actionAnalyzerItems:
- real_pok_host
title: TEPLOTA POK HOSTÉ
item: real_pok_host
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_prac_krk
action: analyzer
actionAnalyzerItems:
- real_prac_krk
title: TEPLOTA PRACOVNA KRK
item: real_prac_krk
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_oby_o_s
action: analyzer
actionAnalyzerItems:
- real_oby_o_s
title: TEPLOTA OBYVÁK OS
item: real_oby_o_s
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
trendItem: real_oby_p_o
action: analyzer
actionAnalyzerItems:
- real_oby_p_o
title: TEPLOTA OBYVÁK PO
item: real_oby_p_o
- component: oh-grid-col
config: {}
slots:
default: []
- component: oh-grid-row
config: {}
slots:
default: []
masonry: []
grid: null
canvas: null
and here is a widget code (source is SMA widget):
uid: PV_widget_by_ALDA
tags: []
props:
parameters:
- context: item
label: Grid L1
name: Grid_L1
required: true
type: TEXT
- context: item
label: Grid L2
name: Grid_L2
required: true
type: TEXT
- context: item
label: Grid L3
name: Grid_L3
required: true
type: TEXT
- context: item
label: Complete consumption L1
name: complete_L1
required: true
type: TEXT
- context: item
label: PV Production
name: pv_leistung
required: true
type: TEXT
- context: item
label: Battery Power
name: batterieleistung
required: true
type: TEXT
- context: item
label: Batterie SOC
name: batterylevel
required: true
type: TEXT
parameterGroups: []
timestamp: Oct 8, 2022, 6:07:48 AM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 460px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
display: flex
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0
width: 120px
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0
width: 120px
slots:
default:
- component: oh-icon
config:
action: navigate
actionPage: page:page_6951b7703d
height: 110px
icon: sma_grid_2
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) >= 0) ? "red" : "green"'
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: = items[props.Grid_L1].state + ' ᵂ'
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0
width: 120px
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: bold
margin-top: 50px
text-align: center
width: 100px
text: = items[props.Grid_L2].state + ' ᵂ'
- component: Label
config:
style:
font-size: 15px
font-weight: bold
margin-top: 0px
text-align: center
width: 100px
text: = items[props.Grid_L3].state + ' ᵂ'
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0
width: 120px
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: bold
text-align: center
width: 100px
text: =Math.round(items[props.pv_leistung].state) + ' ᵂ'
- component: oh-icon
config:
action: navigate
actionPage: page:page_6951b7703d
height: 110px
icon: sma_pv_2
style:
margin-top: -20px
- component: f7-block
config:
style:
display: flex
justify-content: center
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
width: auto
tag: svg
viewBox: 0 0 100 100
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M60 -5 v10 c0 30 10 35 30 35 h20
fill: none
id: path1
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
fill: none
id: path2
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M50, 0 v100
fill: none
id: path3
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
fill: none
id: path4
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
fill: none
id: path5
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: -10px
width: 120px
slots:
default:
- component: oh-icon
config:
action: navigate
actionPage: page:page_6951b7703d
color: orange
height: 110px
icon: sma_consumption_2
- component: Label
config:
style:
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 120px
text: =items[props.complete_L1].state + ' ᵂ'
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0px
width: 120px
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0px
width: 120px
slots:
default:
- component: oh-link
config:
iconColor: red
iconF7: battery_0
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 35) ? true : false'
- component: oh-link
config:
iconColor: orange
iconF7: battery_25
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 35 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
- component: oh-link
config:
iconColor: green
iconF7: battery_100
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
- component: oh-icon
config:
action: navigate
actionPage: page:page_6951b7703d
height: 110px
icon: sma_battery_2
style:
margin-top: -20px
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) <= 0) ? "red" : "green"'
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
white-space: nowrap
width: 100px
text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
visible: true
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0px
width: 120px
thank you
Yep, page config looks fine.
This widget isn’t made to be responsive in size, so it’s working exactly as defined. If you look through the code, many of the pieces have width and/or height dimensions that are defined with pixel units (px). These are absolute values; they won’t change when the container they’re in or the screen they’re on changes size around them. If, on one screen, a 120px element is only 1/10th the screen, it’s still going to be 120px on a screen half as wide but that’s going to be 1/5th of the screen in that case.
The way to have a complex widget such as that effectively scale is to make sure that all the dimension properties are in some relative unit such as %. The first step of that conversion is very easy. You see that the initial card has a height defined in pixels (460px). Every other element in that widget can have a % height that you can easily calculate by dividing it’s absolute height by by 460. You could add an absolute width and then perform the same transformation on all the properties. Then to make sure that the height and width of the widget scales pretty well, you just have change the height and width of the initial card in any number of ways that suit your use. It’s gets much more complicated after that, unfortunately, with the padding, margins, and, in particular, text which is probably why the initial widget author didn’t make this widget responsive in size to begin with.
ok. What to do ?
As first solution I see to “disable” widget resizing on the page. How to do it ?
Second - rework a widget, but really not sure how to link this 120px
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 120px
justify-content: center
margin-top: 0
width: 120px
as relative of this:
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 460px
margin-left: 5px
margin-right: 5px
and on the start I must define width and height to be able recalculate both ?
And if I will define width and heght on the start, I think dimenson is fixed and resize will not work. or.?
This is a doable project, but it’s only doable with a fairly solid understanding of css size and alignment. All of the widget properties that you see under the style headings in the yaml definitions, are css properties.
So step one is to learn about that; the good news is : it’s not really that hard. There are hundreds of website out there that will help you get started learning css. I tend to recommend w3schools, but you can pick whichever one suits you best.
ok, thank you. It takes a time, sure. For now, is it possible somehow fix a widget size ? Means disable a resize function ?
edit: I fixed a size with stict card definiton:
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 400px
width: 360px
margin-left: 5px
margin-right: 5px
and now is question how to change a icon size:
slots:
default:
- component: oh-icon
config:
action: navigate
actionPage: page:page_6951b7703d
height: 120px
icon: sma_grid_2
now it’s fixes 120px, but also must be resized when screen is smaller. I tried 30% but not working
There’s no specific “widget resize” function. Changes or no changes in widget size are simply determined by how the widget’s css is defined.
The oh-icon widget has it’s own height and width properties, but these are restricted by the code to the absolute pixel sizes. If you want to use any other css width unit such as % then you have to put it under the style config which is a different method.
- component: oh-icon
config:
action: navigate
actionPage: page:page_6951b7703d
icon: sma_grid_2
style:
height: 30%
I started a tests with resizing. I wrote this code :
uid: PV_widget_by_ALDA_v2
tags: []
props:
parameters:
- context: item
label: Grid L1
name: Grid_L1
required: true
type: TEXT
- context: item
label: Grid L2
name: Grid_L2
required: true
type: TEXT
- context: item
label: Grid L3
name: Grid_L3
required: true
type: TEXT
- context: item
label: Complete consumption L1
name: complete_L1
required: true
type: TEXT
- context: item
label: PV Production
name: pv_leistung
required: true
type: TEXT
- context: item
label: Battery Power
name: batterieleistung
required: true
type: TEXT
- context: item
label: Batterie SOC
name: batterylevel
required: true
type: TEXT
parameterGroups: []
timestamp: Oct 9, 2022, 1:15:00 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
display: flex
padding: 0
slots:
default:
- component: f7-row
config:
style:
align-items: center
display: flex
slots:
default:
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
slots:
default:
- component: oh-icon
config:
width: 50%
icon: sma_grid_2
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-row
config:
style:
align-items: center
display: flex
slots:
default:
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
slots:
default:
- component: oh-icon
config:
width: 50%
icon: sma_grid_2
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
It’s only for my testing
Idea was test icon resizing. It’s working, but…
I created a f7-card with f7-block and inside f7-row with 3x f7-col and once more again f7-row with 3x f7-col. Idea was that I will have a two rows with three columns, but I have one row with six columns.
I think problem is maybe how is used f7-block, but not sure.
As source I used this :
Don’t set the f7-block to display: flex leave it at its default value (which will be display: block). Flex display means that the block will try to fit it children (the rows) all on the same line and only move one to the next line if there isn’t enough room. Block display will always stack it’s direct children.
correct
before:
uid: PV_widget_by_ALDA_v2
tags: []
props:
parameters:
- context: item
label: Grid L1
name: Grid_L1
required: true
type: TEXT
- context: item
label: Grid L2
name: Grid_L2
required: true
type: TEXT
- context: item
label: Grid L3
name: Grid_L3
required: true
type: TEXT
- context: item
label: Complete consumption L1
name: complete_L1
required: true
type: TEXT
- context: item
label: PV Production
name: pv_leistung
required: true
type: TEXT
- context: item
label: Battery Power
name: batterieleistung
required: true
type: TEXT
- context: item
label: Batterie SOC
name: batterylevel
required: true
type: TEXT
parameterGroups: []
timestamp: Oct 9, 2022, 5:49:38 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
padding: 0
slots:
default:
- component: f7-row
config:
style:
align-items: center
display: flex
slots:
default:
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
slots:
default:
- component: oh-icon
config:
width: 50%
icon: sma_pv_2
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-row
config:
style:
align-items: center
display: flex
slots:
default:
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
slots:
default:
- component: oh-icon
config:
width: 50%
icon: sma_grid_2
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
slots:
default:
- component: oh-icon
config:
width: 50%
icon: sma_battery_2
- component: f7-row
config:
style:
align-items: center
display: flex
slots:
default:
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
slots:
default:
- component: oh-icon
config:
width: 50%
icon: sma_consumption_2
- component: f7-col
config:
style:
width: 33%
display: flex
align-items: center
flex-direction: column
and strange is that result isn’t a square :
edit:
change icon width to 80% improve situation, row is now bigger, but strange is big gap up:
Now you’re getting into not just the size of elements but the spacing and placement. The result you see ins’t square because there’s no directive at the moment to tell it t be square. The columns that you have in side each of the rows are being spaced apart by the row’s display: flex setting. One of the best resources for learning about what is going on with flex spacing is:
Thanks, very good guide. But what isn’t clear for me is, that I have a 3x f7-row, flex display and center alignment. So from my understanding space up and down must be same, but it isn’t:
Doesn’t matter that it’s not a square, it’s clear for me why.
You’re browser’s inspect function is a great help in debugging things like this. It will show you which element is responsible for that space and in turn you can trace that back to your widget code. Often times you’ll find it’s just a issue with one margin or padding property.
If you want help finding that particular issue, you’ll have to post the current state of the code. It’s impossible to guess just from the picture as there could be any one of a thousand explanations.
