Create a scrolling instruction box for a terms and conditions document

Alistair_213694
Alistair_213694 Posts: 9
edited September 2020 in Questions

I want to add a lengthy terms and conditions document as an instruction field in a web form. The document has 29 sections and spans 4 sheets of paper if printed, so I was hoping to contain it in a fixed height DIV block with a horizontal scroll bar to prevent the form becoming too long and allowing the customer to move on without having to scroll through the full document if they don't need to.

Something like this would work in HTML:

<div id="div1" style="height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
   </div>
</div>

But markdown appears to strip-out the in-line HTML on rendering.

Is there a way around this?

Best Answer

  • Chris_573086
    Chris_573086 Posts: 14 admin
    Answer ✓

    @Alistair_213694 Unfortunately it isn't currently possible to style markdown-powered components within the Catalytic UI as we strip HTML tags out of text before it is rendered. I tried some variations on your fixed-height block, including the summary/details pattern below:

    ### Terms and Conditions
    <details>
    
    <summary>Click to expand!</summary>
    
    ..................................
    
    </details>
    

    But in every case the HTML tags were removed and the intended style did not carry over into the instructions text.

    I will submit a product enhancement request to get some discussion going on what additional changes we can make to our Markdown rendering to provide these types of capabilities moving forward.