Forum Discussion

Darian Glover's avatar
Darian Glover
Brass Contributor
Mar 23, 2021
Solved

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 ...
  • Shreyansh Agrawal's avatar
    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."
            }
        ]
    }
     

Resources