In this image, there are two numeric fields, two text fields, two check boxes and one button.
They live inside a flex container (1).
The flex container lives inside an embedded view (2) in another flex container (3).
I added padding to flex (1). As you can see the numeric fields and button responded to the padding but seemingly not the others.
Edit: the same thing happens with adding a bottom margin to flex (1).
Why is this? Is there a way to force them into submission?
Post the flex container here as formatted code so we can have a look. If you're referencing any style classes then post those too.
Top level of the flex:
{"type":"view","payload":{"view":{"path":"Page/ctr/SourceBay_Emb04","width":750.0,"height":82.0,"params":{}}}}
Root:
[
{
"type": "ia.container.flex",
"version": 0,
"props": {
"direction": "column",
"style": {
"margin-bottom": "2px",
"margin-top": "2px"
}
},
"meta": {
"name": "root"
},
"position": {},
"custom": {
"sb_lbl_bgc": "#A5DAFD",
"font": "calc(0.25vw + 0.5em)",
"font_sm": "calc(0.25vw + 0.4em)",
"font_smaller": "calc(0.25vw + 0.3em)"
},
"children": [
{
"type": "ia.container.flex",
"version": 0,
"props": {
"justify": "space-evenly",
"style": {
"overflow": "visible",
"padding-bottom": "0px",
"margin-bottom": "5px"
}
},
"meta": {
"name": "Flex_Top"
},
"position": {
"basis": "27px"
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "CZ01",
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "lbl_Zone"
},
"position": {
"basis": "35px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font"
}
}
}
}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "16-1",
"style": {
"text-align": "center"
}
},
"meta": {
"name": "lbl_SB1"
},
"position": {
"basis": "35px"
},
"custom": {},
"propConfig": {
"props.style.background-color": {
"binding": {
"config": {
"path": "/root.custom.sb_lbl_bgc"
},
"type": "property"
}
},
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_sm"
}
}
}
}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "SnSn+",
"style": {
"font-weight": "bold",
"margin-right": "2px"
}
},
"meta": {
"name": "lbl_SB1_Mat"
},
"position": {
"basis": "32px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_smaller"
}
}
}
}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Action",
"primary": false,
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"margin-right": "2px"
}
},
"meta": {
"name": "btn_SB1_Action"
},
"position": {
"basis": "44px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_sm"
}
}
}
}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"format": "none",
"spinner": {
"enabled": false
},
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Lid"
},
"position": {
"basis": "55px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_smaller"
}
}
}
}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"format": "none",
"spinner": {
"enabled": false
},
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_MM1"
},
"position": {
"basis": "55px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_smaller"
}
}
}
}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"format": "none",
"spinner": {
"enabled": false
},
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Percent1"
},
"position": {
"basis": "55px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_smaller"
}
}
}
}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"format": "none",
"spinner": {
"enabled": false
},
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_MM2"
},
"position": {
"basis": "55px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_smaller"
}
}
}
}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"format": "none",
"spinner": {
"enabled": false
},
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Percent2"
},
"position": {
"basis": "45px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_smaller"
}
}
}
}
},
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"spellcheck": false,
"wrap": "off",
"style": {
"margin-right": "2px"
}
},
"meta": {
"name": "txt_SB1_Used"
},
"position": {
"basis": "55px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_sm"
}
}
}
}
},
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"spellcheck": false,
"wrap": "off"
},
"meta": {
"name": "txt_SB1_Notes"
},
"position": {
"grow": 1,
"basis": "100px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_sm"
}
}
}
}
},
{
"type": "ia.input.checkbox",
"version": 0,
"props": {
"text": ""
},
"meta": {
"name": "chk_SB1_Trim"
},
"position": {
"basis": "30px"
},
"custom": {}
},
{
"type": "ia.input.checkbox",
"version": 0,
"props": {
"text": ""
},
"meta": {
"name": "chk_Major"
},
"position": {
"basis": "30px"
},
"custom": {}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Reset",
"primary": false,
"style": {
"font-weight": "normal",
"margin-right": "2px"
}
},
"meta": {
"name": "btn_Reset"
},
"position": {
"basis": "44px"
},
"custom": {},
"propConfig": {
"props.style.font-size": {
"binding": {
"type": "property",
"config": {
"path": "/root.custom.font_sm"
}
}
}
}
}
]
},
{
"type": "ia.container.flex",
"version": 0,
"props": {
"justify": "space-evenly",
"style": {
"overflow": "visible"
}
},
"meta": {
"name": "Flex_Top_0"
},
"position": {
"basis": "27px"
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "lbl_Misc01"
},
"position": {
"basis": "35px"
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "16-1",
"style": {
"font-size": "calc(0.25vw + 0.4em)",
"text-align": "center"
}
},
"meta": {
"name": "lbl_SB1"
},
"position": {
"basis": "35px"
},
"custom": {},
"propConfig": {
"props.style.background-color": {
"binding": {
"config": {
"path": "/root.custom.sb_lbl_bgc"
},
"type": "property"
}
}
}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "SnSn+",
"style": {
"font-size": "calc(0.25vw + 0.35em)",
"font-weight": "bold",
"margin-right": "2px"
}
},
"meta": {
"name": "lbl_SB1_Mat"
},
"position": {
"basis": "32px"
},
"custom": {}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Action",
"primary": false,
"style": {
"font-size": "calc(0.25vw + 0.42em)",
"fontFamily": "Arial",
"fontWeight": "normal",
"margin-right": "2px"
}
},
"meta": {
"name": "btn_SB1_Action"
},
"position": {
"basis": "44px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Lid"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_MM1"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Percent1"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_MM2"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Percent2"
},
"position": {
"basis": "45px"
},
"custom": {}
},
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"spellcheck": false,
"wrap": "off",
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "txt_SB1_Used"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"spellcheck": false,
"wrap": "off",
"style": {
"font-size": "calc(0.25vw + 0.5em)"
}
},
"meta": {
"name": "txt_SB1_Notes"
},
"position": {
"grow": 1,
"basis": "100px"
},
"custom": {}
},
{
"type": "ia.input.checkbox",
"version": 0,
"props": {
"text": ""
},
"meta": {
"name": "chk_SB1_Trim"
},
"position": {
"basis": "30px"
},
"custom": {}
},
{
"type": "ia.input.checkbox",
"version": 0,
"props": {
"text": ""
},
"meta": {
"name": "chk_Major"
},
"position": {
"basis": "30px"
},
"custom": {}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Reset",
"primary": false,
"style": {
"font-size": "calc(0.25vw + 0.42em)",
"font-weight": "normal",
"margin-right": "2px"
}
},
"meta": {
"name": "btn_Reset"
},
"position": {
"basis": "44px"
},
"custom": {}
}
]
},
{
"type": "ia.container.flex",
"version": 0,
"props": {
"justify": "space-evenly",
"style": {
"overflow": "visible"
}
},
"meta": {
"name": "Flex_Top_1"
},
"position": {
"basis": "27px"
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "lbl_Misc01"
},
"position": {
"basis": "35px"
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "16-1",
"style": {
"font-size": "calc(0.25vw + 0.4em)",
"text-align": "center"
}
},
"meta": {
"name": "lbl_SB1"
},
"position": {
"basis": "35px"
},
"custom": {},
"propConfig": {
"props.style.background-color": {
"binding": {
"config": {
"path": "/root.custom.sb_lbl_bgc"
},
"type": "property"
}
}
}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "SnSn+",
"style": {
"font-size": "calc(0.25vw + 0.35em)",
"font-weight": "bold",
"margin-right": "2px"
}
},
"meta": {
"name": "lbl_SB1_Mat"
},
"position": {
"basis": "32px"
},
"custom": {}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Action",
"primary": false,
"style": {
"font-size": "calc(0.25vw + 0.42em)",
"fontFamily": "Arial",
"fontWeight": "normal",
"margin-right": "2px"
}
},
"meta": {
"name": "btn_SB1_Action"
},
"position": {
"basis": "44px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Lid"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_MM1"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Percent1"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_MM2"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.numeric-entry-field",
"version": 0,
"props": {
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "num_SB1_Percent2"
},
"position": {
"basis": "45px"
},
"custom": {}
},
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"spellcheck": false,
"wrap": "off",
"style": {
"font-size": "calc(0.25vw + 0.5em)",
"margin-right": "2px"
}
},
"meta": {
"name": "txt_SB1_Used"
},
"position": {
"basis": "55px"
},
"custom": {}
},
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"spellcheck": false,
"wrap": "off",
"style": {
"font-size": "calc(0.25vw + 0.5em)"
}
},
"meta": {
"name": "txt_SB1_Notes"
},
"position": {
"grow": 1,
"basis": "100px"
},
"custom": {}
},
{
"type": "ia.input.checkbox",
"version": 0,
"props": {
"text": ""
},
"meta": {
"name": "chk_SB1_Trim"
},
"position": {
"basis": "30px"
},
"custom": {}
},
{
"type": "ia.input.checkbox",
"version": 0,
"props": {
"text": ""
},
"meta": {
"name": "chk_Major"
},
"position": {
"basis": "30px"
},
"custom": {}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Reset",
"primary": false,
"style": {
"font-size": "calc(0.25vw + 0.42em)",
"font-weight": "normal",
"margin-right": "2px"
}
},
"meta": {
"name": "btn_Reset"
},
"position": {
"basis": "44px"
},
"custom": {}
}
]
}
]
}
]
Forgot to mention that the browser is set to very large font and the OS zoom is 125%.
I've just lost interest! (But does it work on normal settings?)
Um... yes...
Deja vu?
Oh god! scaling 2.0 for the designer is killing me! I can't work LOL. I don't think this is going be the solution for fixing my user's issue with zoom and large font in a browser. But, thanks for the tip IF my eyesight gets real bad!
I feel your pain; that scaling option breaks way more than its worth, and as a developer, when I write code to override or mitigate the effects of that option, it bothers me that my app is now more bloated and less efficient than it could have otherwise been if microsoft had just left the scaling options up to me.
I imagine that it would help if it were labeled as an accessibility feature like spoken text or on screen keyboard, so the user would have a sense that that an abnormal configuration is being selected. Instead, it's packaged under the normal display set up settings, and often times, I encounter things like this:
Uggh!
