Forum Discussion
Darian Glover
Mar 23, 2021Brass Contributor
Flexbox Not Working with Modern Form Header (Configure Layout Using JSON)
Greetings, I am attempting to customize the header of the out-of-the-box (OOB) form header using the Configure Layout JSON feature. I'd like to have an icon in the upper left, a title section to ...
- Apr 01, 2021
Darian Glover
Add a flex style at the root div of your JSON -{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "debugMode": true, "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "width": "100%", "font-style": "italic" }, "children": [ { "elmType": "div", "style": { "color": "red" }, "txtContent": "Icon Position" }, { "elmType": "div", "style": { "flex-basis": "100%", "display": "flow-root", "color": "blue" }, "txtContent": "Header Position" } ] }, { "elmType": "div", "txtContent": "Form Instruction Position. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa ante. Phasellus mattis felis non tortor bibendum, in laoreet tortor auctor. Nulla varius, nibh eget sollicitudin iaculis, urna mauris finibus mauris, at malesuada mi ante eget metus. Cras aliquam mauris urna, nec rutrum purus laoreet vitae." } ] }
Shreyansh Agrawal
Microsoft
Apr 01, 2021Darian Glover
Add a flex style at the root div of your JSON -
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"debugMode": true,
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"width": "100%",
"font-style": "italic"
},
"children": [
{
"elmType": "div",
"style": {
"color": "red"
},
"txtContent": "Icon Position"
},
{
"elmType": "div",
"style": {
"flex-basis": "100%",
"display": "flow-root",
"color": "blue"
},
"txtContent": "Header Position"
}
]
},
{
"elmType": "div",
"txtContent": "Form Instruction Position. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa ante. Phasellus mattis felis non tortor bibendum, in laoreet tortor auctor. Nulla varius, nibh eget sollicitudin iaculis, urna mauris finibus mauris, at malesuada mi ante eget metus. Cras aliquam mauris urna, nec rutrum purus laoreet vitae."
}
]
}
- Darian GloverApr 01, 2021Brass ContributorThanks!