SOLVED

Flexbox Not Working with Modern Form Header (Configure Layout Using JSON)

%3CLINGO-SUB%20id%3D%22lingo-sub-2229991%22%20slang%3D%22en-US%22%3EFlexbox%20Not%20Working%20with%20Modern%20Form%20Header%20(Configure%20Layout%20Using%20JSON)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2229991%22%20slang%3D%22en-US%22%3E%3CP%3EGreetings%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20attempting%20to%20customize%20the%20header%20of%20the%20out-of-the-box%20(OOB)%20form%20header%20using%20the%20Configure%20Layout%20JSON%20feature.%20I'd%20like%20to%20have%20an%20icon%20in%20the%20upper%20left%2C%20a%20title%20section%20to%20the%20right%20of%20the%20icon%2C%20and%20instructional%20text%20beneath%20both.%20This%20can%20be%20easily%20be%20done%20with%20the%20help%20of%20the%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fsp-dev-list-formatting%2Ftools%2Fhtml-formatter-generator%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EHTML%20to%20Formatter%20(pnp.github.io)%3C%2FA%3E.%20While%20my%20code%20works%20within%20the%20formatter%20and%20elsewhere%20it%20does%20not%20work%20within%20the%20form%20in%20my%20tenant.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20looked%20for%20CSS%20styles%20that%20would%20be%20in%20conflict%20and%20tried%20several%20flexbox%20workarounds%20for%20breaking%20to%20a%20new%20row.%20Does%20anyone%20have%20solutions%20to%20this%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ERendered%20Everywhere%20Except%20within%20SharePoint%20Pages%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3ENote%20the%20row%20break%20between%20Header%20Position%20and%20the%20Form%20Instruction%20Position.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22HTMLFormattingRendering.png%22%20style%3D%22width%3A%20341px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F266325i382C6D8ED7F842FC%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22HTMLFormattingRendering.png%22%20alt%3D%22HTMLFormattingRendering.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ERendered%20in%20SharePoint%20Page%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3ENote%20that%20there%20is%20no%26nbsp%3Bbreak%20between%20Header%20Position%20and%20the%20Form%20Instruction%20Position.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SharePointRendering.png%22%20style%3D%22width%3A%20962px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F266326iC87EACFF59FC7B1B%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22SharePointRendering.png%22%20alt%3D%22SharePointRendering.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EOriginal%20HTML%20Code%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-html%22%3E%3CCODE%3E%3CDIV%3E%0A%20%20%3CDIV%20id%3D%22FormHeaderContainer%22%3E%0A%20%20%20%20%3CDIV%20id%3D%22IconPosition%22%3EIcon%20Position%3C%2FDIV%3E%0A%20%20%20%20%3CDIV%20id%3D%22HeaderPosition%22%3EHeader%20Position%3C%2FDIV%3E%0A%20%20%3C%2FDIV%3E%0A%20%20%3CDIV%20id%3D%22InstructionPosition%22%3EForm%20Instruction%20Position.%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Fusce%20a%20massa%20ante.%20Phasellus%20mattis%20felis%20non%20tortor%20bibendum%2C%20in%20laoreet%20tortor%20auctor.%20Nulla%20varius%2C%20nibh%20eget%20sollicitudin%20iaculis%2C%20urna%20mauris%20finibus%20mauris%2C%20at%20malesuada%20mi%20ante%20eget%20metus.%20Cras%20aliquam%20mauris%20urna%2C%20nec%20rutrum%20purus%20laoreet%20vitae.%3C%2FDIV%3E%0A%3C%2FDIV%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ECSS%20Code%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-css%22%3E%3CCODE%3E%23FormHeaderContainer%20%7B%0A%20%20display%3A%20flex%3B%0A%20%20flex-direction%3A%20row%3B%0A%20%20width%3A%20100%25%3B%0A%20%20font-style%3A%20italic%3B%0A%7D%0A%0A%23FormHeaderContainer%20%26gt%3B%20%23IconPosition%20%7B%0A%20%20color%3A%20red%3B%0A%20%20%7D%0A%23FormHeaderContainer%20%26gt%3B%20%23HeaderPosition%20%7B%0A%20%20%20%20flex-basis%3A%20100%25%3B%0A%20%20%20%20display%3A%20flow-root%3B%0A%20%20%20%20color%3A%20blue%3B%0A%20%20%7D%0A%23FormHeaderContainer%20%26gt%3B%20%23InstructionPosition%20%7B%0A%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EJSON%20Code%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22debugMode%22%3A%20true%2C%0A%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%22children%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%22font-style%22%3A%20%22italic%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22red%22%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Icon%20Position%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22flex-basis%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flow-root%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22blue%22%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Header%20Position%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%22txtContent%22%3A%20%22Form%20Instruction%20Position.%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Fusce%20a%20massa%20ante.%20Phasellus%20mattis%20felis%20non%20tortor%20bibendum%2C%20in%20laoreet%20tortor%20auctor.%20Nulla%20varius%2C%20nibh%20eget%20sollicitudin%20iaculis%2C%20urna%20mauris%20finibus%20mauris%2C%20at%20malesuada%20mi%20ante%20eget%20metus.%20Cras%20aliquam%20mauris%20urna%2C%20nec%20rutrum%20purus%20laoreet%20vitae.%22%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2229991%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2249065%22%20slang%3D%22en-US%22%3ERe%3A%20Flexbox%20Not%20Working%20with%20Modern%20Form%20Header%20(Configure%20Layout%20Using%20JSON)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2249065%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F24171%22%20target%3D%22_blank%22%3E%40Darian%20Glover%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EAdd%20a%20flex%20style%20at%20the%20root%20div%20of%20your%20JSON%20-%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%20%22debugMode%22%3A%20true%2C%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22column%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-style%22%3A%20%22italic%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22red%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Icon%20Position%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-basis%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flow-root%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22blue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Header%20Position%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Form%20Instruction%20Position.%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Fusce%20a%20massa%20ante.%20Phasellus%20mattis%20felis%20non%20tortor%20bibendum%2C%20in%20laoreet%20tortor%20auctor.%20Nulla%20varius%2C%20nibh%20eget%20sollicitudin%20iaculis%2C%20urna%20mauris%20finibus%20mauris%2C%20at%20malesuada%20mi%20ante%20eget%20metus.%20Cras%20aliquam%20mauris%20urna%2C%20nec%20rutrum%20purus%20laoreet%20vitae.%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CDIV%20class%3D%22ms-editor-squiggler%22%20style%3D%22color%3A%20initial%3B%20font%3A%20initial%3B%20font-feature-settings%3A%20initial%3B%20font-kerning%3A%20initial%3B%20font-optical-sizing%3A%20initial%3B%20font-variation-settings%3A%20initial%3B%20forced-color-adjust%3A%20initial%3B%20text-orientation%3A%20initial%3B%20text-rendering%3A%20initial%3B%20-webkit-font-smoothing%3A%20initial%3B%20-webkit-locale%3A%20initial%3B%20-webkit-text-orientation%3A%20initial%3B%20-webkit-writing-mode%3A%20initial%3B%20writing-mode%3A%20initial%3B%20zoom%3A%20initial%3B%20place-content%3A%20initial%3B%20place-items%3A%20initial%3B%20place-self%3A%20initial%3B%20alignment-baseline%3A%20initial%3B%20animation%3A%20initial%3B%20appearance%3A%20initial%3B%20aspect-ratio%3A%20initial%3B%20backdrop-filter%3A%20initial%3B%20backface-visibility%3A%20initial%3B%20background%3A%20initial%3B%20background-blend-mode%3A%20initial%3B%20baseline-shift%3A%20initial%3B%20block-size%3A%20initial%3B%20border-block%3A%20initial%3B%20border%3A%20initial%3B%20border-radius%3A%20initial%3B%20border-collapse%3A%20initial%3B%20border-end-end-radius%3A%20initial%3B%20border-end-start-radius%3A%20initial%3B%20border-inline%3A%20initial%3B%20border-start-end-radius%3A%20initial%3B%20border-start-start-radius%3A%20initial%3B%20inset%3A%20initial%3B%20box-shadow%3A%20initial%3B%20box-sizing%3A%20initial%3B%20break-after%3A%20initial%3B%20break-before%3A%20initial%3B%20break-inside%3A%20initial%3B%20buffered-rendering%3A%20initial%3B%20caption-side%3A%20initial%3B%20caret-color%3A%20initial%3B%20clear%3A%20initial%3B%20clip%3A%20initial%3B%20clip-path%3A%20initial%3B%20clip-rule%3A%20initial%3B%20color-interpolation%3A%20initial%3B%20color-interpolation-filters%3A%20initial%3B%20color-rendering%3A%20initial%3B%20color-scheme%3A%20initial%3B%20columns%3A%20initial%3B%20column-fill%3A%20initial%3B%20gap%3A%20initial%3B%20column-rule%3A%20initial%3B%20column-span%3A%20initial%3B%20contain%3A%20initial%3B%20contain-intrinsic-size%3A%20initial%3B%20content%3A%20initial%3B%20content-visibility%3A%20initial%3B%20counter-increment%3A%20initial%3B%20counter-reset%3A%20initial%3B%20counter-set%3A%20initial%3B%20cursor%3A%20initial%3B%20cx%3A%20initial%3B%20cy%3A%20initial%3B%20d%3A%20initial%3B%20display%3A%20block%3B%20dominant-baseline%3A%20initial%3B%20empty-cells%3A%20initial%3B%20fill%3A%20initial%3B%20fill-opacity%3A%20initial%3B%20fill-rule%3A%20initial%3B%20filter%3A%20initial%3B%20flex%3A%20initial%3B%20flex-flow%3A%20initial%3B%20float%3A%20initial%3B%20flood-color%3A%20initial%3B%20flood-opacity%3A%20initial%3B%20grid%3A%20initial%3B%20grid-area%3A%20initial%3B%20height%3A%200px%3B%20hyphens%3A%20initial%3B%20image-orientation%3A%20initial%3B%20image-rendering%3A%20initial%3B%20inline-size%3A%20initial%3B%20inset-block%3A%20initial%3B%20inset-inline%3A%20initial%3B%20isolation%3A%20initial%3B%20letter-spacing%3A%20initial%3B%20lighting-color%3A%20initial%3B%20line-break%3A%20initial%3B%20list-style%3A%20initial%3B%20margin-block%3A%20initial%3B%20margin%3A%20initial%3B%20margin-inline%3A%20initial%3B%20marker%3A%20initial%3B%20mask%3A%20initial%3B%20mask-type%3A%20initial%3B%20max-block-size%3A%20initial%3B%20max-height%3A%20initial%3B%20max-inline-size%3A%20initial%3B%20max-width%3A%20initial%3B%20min-block-size%3A%20initial%3B%20min-height%3A%20initial%3B%20min-inline-size%3A%20initial%3B%20min-width%3A%20initial%3B%20mix-blend-mode%3A%20initial%3B%20object-fit%3A%20initial%3B%20object-position%3A%20initial%3B%20offset%3A%20initial%3B%20opacity%3A%20initial%3B%20order%3A%20initial%3B%20origin-trial-test-property%3A%20initial%3B%20orphans%3A%20initial%3B%20outline%3A%20initial%3B%20outline-offset%3A%20initial%3B%20overflow-anchor%3A%20initial%3B%20overflow-clip-margin%3A%20initial%3B%20overflow-wrap%3A%20initial%3B%20overflow%3A%20initial%3B%20overscroll-behavior-block%3A%20initial%3B%20overscroll-behavior-inline%3A%20initial%3B%20overscroll-behavior%3A%20initial%3B%20padding-block%3A%20initial%3B%20padding%3A%20initial%3B%20padding-inline%3A%20initial%3B%20page%3A%20initial%3B%20page-orientation%3A%20initial%3B%20paint-order%3A%20initial%3B%20perspective%3A%20initial%3B%20perspective-origin%3A%20initial%3B%20pointer-events%3A%20initial%3B%20position%3A%20initial%3B%20quotes%3A%20initial%3B%20r%3A%20initial%3B%20resize%3A%20initial%3B%20ruby-position%3A%20initial%3B%20rx%3A%20initial%3B%20ry%3A%20initial%3B%20scroll-behavior%3A%20initial%3B%20scroll-margin-block%3A%20initial%3B%20scroll-margin%3A%20initial%3B%20scroll-margin-inline%3A%20initial%3B%20scroll-padding-block%3A%20initial%3B%20scroll-padding%3A%20initial%3B%20scroll-padding-inline%3A%20initial%3B%20scroll-snap-align%3A%20initial%3B%20scroll-snap-stop%3A%20initial%3B%20scroll-snap-type%3A%20initial%3B%20shape-image-threshold%3A%20initial%3B%20shape-margin%3A%20initial%3B%20shape-outside%3A%20initial%3B%20shape-rendering%3A%20initial%3B%20size%3A%20initial%3B%20speak%3A%20initial%3B%20stop-color%3A%20initial%3B%20stop-opacity%3A%20initial%3B%20stroke%3A%20initial%3B%20stroke-dasharray%3A%20initial%3B%20stroke-dashoffset%3A%20initial%3B%20stroke-linecap%3A%20initial%3B%20stroke-linejoin%3A%20initial%3B%20stroke-miterlimit%3A%20initial%3B%20stroke-opacity%3A%20initial%3B%20stroke-width%3A%20initial%3B%20tab-size%3A%20initial%3B%20table-layout%3A%20initial%3B%20text-align%3A%20initial%3B%20text-align-last%3A%20initial%3B%20text-anchor%3A%20initial%3B%20text-combine-upright%3A%20initial%3B%20text-decoration%3A%20initial%3B%20text-decoration-skip-ink%3A%20initial%3B%20text-indent%3A%20initial%3B%20text-overflow%3A%20initial%3B%20text-shadow%3A%20initial%3B%20text-size-adjust%3A%20initial%3B%20text-transform%3A%20initial%3B%20text-underline-offset%3A%20initial%3B%20text-underline-position%3A%20initial%3B%20touch-action%3A%20initial%3B%20transform%3A%20initial%3B%20transform-box%3A%20initial%3B%20transform-origin%3A%20initial%3B%20transform-style%3A%20initial%3B%20transition%3A%20initial%3B%20user-select%3A%20initial%3B%20vector-effect%3A%20initial%3B%20vertical-align%3A%20initial%3B%20visibility%3A%20initial%3B%20-webkit-app-region%3A%20initial%3B%20border-spacing%3A%20initial%3B%20-webkit-border-image%3A%20initial%3B%20-webkit-box-align%3A%20initial%3B%20-webkit-box-decoration-break%3A%20initial%3B%20-webkit-box-direction%3A%20initial%3B%20-webkit-box-flex%3A%20initial%3B%20-webkit-box-ordinal-group%3A%20initial%3B%20-webkit-box-orient%3A%20initial%3B%20-webkit-box-pack%3A%20initial%3B%20-webkit-box-reflect%3A%20initial%3B%20-webkit-highlight%3A%20initial%3B%20-webkit-hyphenate-character%3A%20initial%3B%20-webkit-line-break%3A%20initial%3B%20-webkit-line-clamp%3A%20initial%3B%20-webkit-mask-box-image%3A%20initial%3B%20-webkit-mask%3A%20initial%3B%20-webkit-mask-composite%3A%20initial%3B%20-webkit-perspective-origin-x%3A%20initial%3B%20-webkit-perspective-origin-y%3A%20initial%3B%20-webkit-print-color-adjust%3A%20initial%3B%20-webkit-rtl-ordering%3A%20initial%3B%20-webkit-ruby-position%3A%20initial%3B%20-webkit-tap-highlight-color%3A%20initial%3B%20-webkit-text-combine%3A%20initial%3B%20-webkit-text-decorations-in-effect%3A%20initial%3B%20-webkit-text-emphasis%3A%20initial%3B%20-webkit-text-emphasis-position%3A%20initial%3B%20-webkit-text-fill-color%3A%20initial%3B%20-webkit-text-security%3A%20initial%3B%20-webkit-text-stroke%3A%20initial%3B%20-webkit-transform-origin-x%3A%20initial%3B%20-webkit-transform-origin-y%3A%20initial%3B%20-webkit-transform-origin-z%3A%20initial%3B%20-webkit-user-drag%3A%20initial%3B%20-webkit-user-modify%3A%20initial%3B%20white-space%3A%20initial%3B%20widows%3A%20initial%3B%20width%3A%20initial%3B%20will-change%3A%20initial%3B%20word-break%3A%20initial%3B%20word-spacing%3A%20initial%3B%20x%3A%20initial%3B%20y%3A%20initial%3B%20z-index%3A%20initial%3B%22%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2249099%22%20slang%3D%22en-US%22%3ERe%3A%20Flexbox%20Not%20Working%20with%20Modern%20Form%20Header%20(Configure%20Layout%20Using%20JSON)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2249099%22%20slang%3D%22en-US%22%3EThanks!%3C%2FLINGO-BODY%3E
Occasional Contributor

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 the right of the icon, and instructional text beneath both. This can be easily be done with the help of the HTML to Formatter (pnp.github.io). While my code works within the formatter and elsewhere it does not work within the form in my tenant.

 

I've looked for CSS styles that would be in conflict and tried several flexbox workarounds for breaking to a new row. Does anyone have solutions to this?

 

Rendered Everywhere Except within SharePoint Pages

Note the row break between Header Position and the Form Instruction Position.

HTMLFormattingRendering.png

 

Rendered in SharePoint Page

Note that there is no break between Header Position and the Form Instruction Position.

SharePointRendering.png

 

Original HTML Code

 

<div>
  <div id="FormHeaderContainer">
    <div id="IconPosition">Icon Position</div>
    <div id="HeaderPosition">Header Position</div>
  </div>
  <div id="InstructionPosition">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.</div>
</div>

 

 

CSS Code

 

#FormHeaderContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-style: italic;
}

#FormHeaderContainer > #IconPosition {
  color: red;
  }
#FormHeaderContainer > #HeaderPosition {
    flex-basis: 100%;
    display: flow-root;
    color: blue;
  }
#FormHeaderContainer > #InstructionPosition {

  }

 

 

JSON Code

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "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."
    }
  ]
}

 

 

 

 

 

2 Replies
best response confirmed by Darian Glover (Occasional Contributor)
Solution

@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."
        }
    ]
}