Mark_VG
March 1, 2023, 9:16am
1
Hi All
I have been battling with an alignment issue for a week or two, and following JustinG good advise, tried to go back to the basics…
I took my full widget and removed all the extras and cut it down to just the skeleton for layout and eventually even removed part of that and have ended up with the following:
The two YELLOW block are configured exactly the same other than the left: xxpx line, so theoretically they should line up top to bottom? The left: xxpx is different so that they do not overlap and hide each other.
In case I was missing something I even DIFFED the two components:
So I am really confused why the layout difference in the widget editor?
My YAML:
uid: Block_Layouts1
tags: []
props:
parameterGroups: []
timestamp: Mar 1, 2023, 10:48:34 AM
component: f7-block
config:
style:
border: 1px solid black
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-verticall: 0px
border-radius: 20px
height: 720px
left: 0px
top: 20px
width: 360px
slots:
default:
- component: f7-block
config:
style:
border: 1px solid black
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-verticall: 0px
border-radius: 20px
display: flex
height: 160px
justify-content: center
left: 0px
position: absolute
top: -15px
width: 360px
- component: f7-block
config:
style:
border: 1px solid black
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-verticall: 0px
background: red
border-radius: 5px
height: 90px
left: 30px
top: 20px
width: 300px
slots:
default:
- component: f7-block
config:
style:
border: 1px solid black
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
background: yellow
border-radius: 5px
display: flex
height: 45px
justify-content: center
left: 10px
position: absolute
top: 0px
width: 300px
- component: f7-block
config:
style:
border: 1px solid black
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
background: yellow
border-radius: 5px
display: flex
height: 45px
justify-content: center
left: 30px
position: absolute
top: 0px
width: 300px
I am also not sure how to fix? I got the “correct” block in the correct position by copying a different block and adjusting the values etc. to get it in the right place.
When actually displaying the widget in a browser window, the layout is correct - and it looks like I have another one that looks correct in the widget editor but wrong on the browser?
Any advise/suggestions would be appreciated
Mark
JustinG
March 1, 2023, 3:16pm
2
You’re running into some css styling in the widget editor that is being applied to the first child of a block element. This is over-riding the changes in the f7 variables because it is applied after the f7 library, but the same css doesn’t exist outside the widget editor.
In this case, there’s no reason to muck with the f7 variables anyway. Just set the margins on your blocks directly:
style:
margin: 0
and that will also take precedence over the errant css directive in the widget editor.
1 Like
Mark_VG
March 1, 2023, 3:32pm
3
JustinG:
style:
margin: 0
Hi Justin
Just to clarify, so replace the following:
style:
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
with
style:
margin: 0
That seems have done the trick. Will apply the same to my more complex widget and report back.
Your knowledge never ceases to amaze me.
Can I ask one more thing… Please can you re share your links for flex box etc? I thought I had saved them, but ow can’t track them down.
Thanks
JustinG
March 1, 2023, 3:46pm
4
My primary quick css reference is CSS Reference
And the flexbox intro that I most often recommend is A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
1 Like
Mark_VG
March 2, 2023, 11:15am
5
Hi Justin
Your solution has worked perfectly for most of the blocks etc I used.
The is however one, which seems to still have a problem, and in fact works better with:
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
than with:
margin: 0
The margin: 0 actually seems to be ignored?
The “offending” nested blocks are defined as:
- component: f7-block
config:
style:
--f7-block-margin-horizontal: 0px
--f7-block-margin-vertical: 0px
--f7-block-padding-horizontal: 0px
--f7-block-padding-vertical: 0px
background: var(--paradox-background-keypad)
border-radius: 20px
display: flex
flex-direction: column
flex-wrap: nowrap
height: 460px
justify-content: space-evenly
left: 45px
position: absolute
top: 130px
width: 270px
slots:
default:
- component: f7-block
config:
style:
margin: 0
display: flex
justify-content: space-evenly
slots:
default:
- component: oh-button
config:
action: command
actionCommand: STAY_ARM
actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
class:
- elevation-2
- elevation-hover-5
- elevation-pressed-2
- elevation-transition
large: true
raised: true
style:
background: var(--paradox-keys-color)
border-radius: 12px
font-size: 9.5px
font-weight: var(--paradox-keys-font-weight)
width: 60px
text: STAY
textColor: black
tooltip: '=!(props.tooltipEnable) ? false : "Arm in STAY Mode"'
tooltip-trigger: hover
- component: oh-button
config:
action: command
actionCommand: FORCE_ARM
actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
class:
- elevation-2
- elevation-hover-5
- elevation-pressed-2
- elevation-transition
large: true
raised: true
style:
background: var(--paradox-keys-color)
border-radius: 5px
font-size: 9.5px
font-weight: var(--paradox-keys-font-weight)
width: 60px
text: FORCE
textColor: black
tooltip: '=!(props.tooltipEnable) ? false : "Arm in FORCE Mode"'
tooltip-trigger: hover
- component: oh-button
config:
action: command
actionCommand: ARM
actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
class:
- elevation-2
- elevation-hover-5
- elevation-pressed-2
- elevation-transition
large: true
raised: true
style:
background: var(--paradox-keys-color)
border-radius: 5px
font-size: 9.5px
font-weight: var(--paradox-keys-font-weight)
width: 60px
text: ARM
textColor: black
tooltip: '=!(props.tooltipEnable) ? false : "Arm in EXIT Mode"'
tooltip-trigger: hover
- component: oh-button
config:
action: command
actionCommand: DISARM
actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
class:
- elevation-2
- elevation-hover-5
- elevation-pressed-2
- elevation-transition
large: true
raised: true
style:
background: var(--paradox-keys-color)
border-radius: 12px
font-size: 9.5px
font-weight: var(--paradox-keys-font-weight)
width: 60px
text: DISARM
textColor: black
tooltip: '=!(props.tooltipEnable) ? false : "DISARM Partition"'
tooltip-trigger: hover
with a few repeats of the nested block.
The reason for the multiple nested blocks was to get the ```space-evenly`` to work
Can you spot any reason for this? Or would you need the whole widget?
Thanks again.
JustinG
March 2, 2023, 2:47pm
6
If it is the case that the margin setting is being ignored, then that can only be because somewhere upstream there is another css directive that is setting the margin to a value that includes the !important keyword. That is the css indicator that says “this value cannot be over-written by other downstream directives”. The simple solution here would be to tell css that your value is also “important” enough to over-write the other value:
margin: 0 !important
However, I suspect that this is not the case (although, as you guess, I cannot say for certain without seeing the entire widget code). More likely you’ve got an additional padding value on the block (padding and margin are not the same). Your series of f7 variable adjustments 0 out the margin and the padding but when you replace that with just a margin of 0 then any padding values will still remain. So you probably also just need to add
padding: 0
as well.
Mark_VG
March 2, 2023, 3:02pm
7
JustinG:
padding: 0
Thanks Justin. Adding padding: 0 makes it better, but still not the same as the f7-bloc... settings
If could could see your way clear to have a look at the complete code I would appreciate it. I have attached.
Paradox_EVO_V2d1.txt (42.2 KB)
The part I am worried about is at line 374
Thanks
JustinG
March 2, 2023, 4:14pm
8
I do not see any problem on that particular block. All margin and padding values are 0 whether using the direct properties or the f7 variables and it looks to be true in both the widget editor and the page layout for my system.
If you’re still having trouble, then it might be something specific to your environment or the page you’re viewing it on. You’ll have to use the inspector in your browser and see if you can verify that the margin and padding are correct and if not where the extra values are coming from.
On Chrome, when you inspect the element you can select the Computed tab which will show you 2 things:
A brief overview of all the position, margin, and padding values of the element that looks like this:
A list of the final values for every property that is not default. If you scroll down that list and expand any one of the properties you will see all the different directives for that element (if there is more than one) and which on is currently operative. You can also click on the the arrow icon that appears when you hover over the property to be taken to the definition of that directive. This is how I track down errant css values.
Mark_VG
March 2, 2023, 5:04pm
9
Thanks Justin
So this is what I get on the displayed popup with just margin: 0, no padding set:
Which I guess means there is some sort of padding being applied?
Below that I see:
But not sure what to make of that?
The element looks like this:
<div class="block" style="margin: 0px; background: var(--paradox-background-keypad); border-radius: 20px; display: flex; flex-flow: column nowrap; height: 460px; justify-content: space-evenly; left: 45px; position: absolute; top: 130px; width: 270px;"><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="STAY_ARM" actionitem="undefined_CommunicatorCommand" style="background: var(--paradox-keys-color); border-radius: 12px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>STAY</span></a><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="FORCE_ARM" actionitem="undefined_CommunicatorCommand" style="background: var(--paradox-keys-color); border-radius: 5px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>FORCE</span></a><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="ARM" actionitem="undefined_CommunicatorCommand" style="background: var(--paradox-keys-color); border-radius: 5px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>ARM</span></a><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="DISARM" actionitem="undefined_CommunicatorCommand" style="background: var(--paradox-keys-color); border-radius: 12px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>DISARM</span></a></div><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="Bypass" actionvariablevalue="true" style="background: var(--paradox-keys-color); border-radius: 12px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>BYP</span></a><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="partition_secondary_command|0,1" style="background: var(--paradox-keys-color); border-radius: 5px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>MEM</span></a><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="partition_secondary_command|0,1" style="background: var(--paradox-keys-color); border-radius: 5px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>TBL</span></a><a href="#" class="button button-large button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="partition_secondary_command|0,1" style="background: var(--paradox-keys-color); border-radius: 12px; font-size: 9.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>ACC</span></a></div><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="1" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>1</span></a><div style="color: black; font-size: 10px; left: 35px; position: absolute; top: -15px;">
AREAS
</div><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="2" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>2</span></a><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="3" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>3</span></a></div><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="4" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>4</span></a><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="5" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>5</span></a><div style="color: black; font-size: 10px; left: 110px; position: absolute; top: -15px;">
INSTANT
</div><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="6" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>6</span></a><div style="color: black; font-size: 10px; left: 195px; position: absolute; top: -15px;">
DISPLAY
</div></div><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="7" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>7</span></a><div style="color: black; font-size: 10px; left: 35px; position: absolute; top: -15px;">
EVENT
</div><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="8" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>8</span></a><div style="color: black; font-size: 10px; left: 120px; position: absolute; top: -15px;">
TEST
</div><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="9" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>9</span></a><div style="color: black; font-size: 10px; left: 200px; position: absolute; top: -15px;">
CHIME
</div></div><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="" style="background: var(--paradox-keys-color); border-radius: 12px; font-size: 7.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>CLEAR</span></a><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="0" style="background: var(--paradox-keys-color); border-radius: 12px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>0</span></a><div style="color: black; font-size: 10px; left: 125px; position: absolute; top: -15px;">
PRG
</div><a href="#" class="button button-raised text-color-black elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="variable" actionvariable="pincode" actionvariablevalue="9" style="background: var(--paradox-keys-color); border-radius: 12px; font-size: 7.5px; font-weight: var(--paradox-keys-font-weight); width: 60px;"><span>ENTER</span></a></div><div class="block" style="display: flex; justify-content: space-evenly; margin: 0px;"><a href="#" class="button elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="partition_secondary_command|6,1" style="border-radius: 12px; color: white; width: 60px;"><i class="icon f7-icons color-blue" style="font-size: 24px; width: 24px; height: 24px;">shield_fill</i></a><div style="color: black; font-size: 10px; left: 35px; position: absolute; top: 35px;">
[1] + [3]
</div><a href="#" class="button elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="partition_secondary_command|5,1" style="border-radius: 12px; color: white; width: 60px;"><i class="icon f7-icons color-green" style="font-size: 28px; width: 28px; height: 28px;">exclamationmark_triangle</i></a><div style="color: black; font-size: 10px; left: 115px; position: absolute; top: 35px;">
[4] + [6]
</div><a href="#" class="button elevation-2 elevation-hover-5 elevation-pressed-2 elevation-transition" action="command" actioncommand="partition_secondary_command|4,1" style="border-radius: 12px; color: white; width: 60px;"><i class="icon f7-icons color-red" style="font-size: 20px; width: 20px; height: 20px;">flame</i></a><div style="color: black; font-size: 10px; position: absolute; right: 30px; top: 35px;">
[7] + [8]
</div></div></div>
With padding: 0 added:
And with the f7...:
So the computed layouts look the same, but the result is not?
Way above me…
JustinG
March 2, 2023, 5:50pm
10
Sorry, I wasn’t sure what difference you were focused on last time and wasn’t worries about the individual button rows. What you have here is all about the cascading part of the Cascading Style Sheets. For all elements with the class block the padding properties are explicitly set to calc(var(--f7-block-padding-[direction]) + var(--f7-safe-area-[side])) by some process of the oh app (as these are f7-block components, most likely the base f7 library). As far as “cascading” is concerned, that means these values won’t change if their parent element changes because they are net set to inherit the parent values, they are set to some concrete, calculated value.
So, when you change the margin and padding of a “block” to 0, that element gets the new values, but any child “block” elements remain unaffected.
On the, other hand, when you modify the margin and padding of a “block” by changing a css variable such as --f7-block-padding-horizontal, that variable value “cascades” to all the children of that element (unless one of them over-writes it with a new value). Any of the child blocks that are still using calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)) for their padding-left style will also change.
The result of your two tests look the same at the level of the top “block” element because they are; both methods 0 out the margin and padding of that element. The overall widget looks different, however, because you are having different impacts on padding styles of the “blocks” that are inside the one you have changed.
Mark_VG
March 2, 2023, 6:04pm
11
I should have been more clear. Sorry.
I added the padding: 0 to all the cascaded blocks and it looks right now.
Still not sure why the first blocks gets the padding… But at least it looks right now and I have hopefully learned something I will remember.
Thanks for the help and the explanation.
