Crestron Components Lib - Showcase App

ch5-modal-dialog (inherited from ch5-overlay-panel): overflow

attribute: overflow

Valid values: 'scroll' and 'show'.

The overflow property specifies what happens if content does or does not overflow the component box. If 'scroll' is selected, the scrollbars might appear if content is larger than the available area. If 'show' is selected, the overflow is not clipped.

The following example is for overflow='scroll':

Click the above button to make the modal visible.

Sample text

<ch5-button label="Trigger show pulse" sendEventOnClick="trigger_1"></ch5-button>

<p>
    Click the above button to make the modal visible.
</p>

<ch5-modal-dialog
        receiveStateShowPulse="trigger_1"
        customStyle="width:100px;height:150px;"
        closable
        mask
        overflow="scroll">
    <p>Sample text</p>
    <ch5-image
            id="ex1-img"
            url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-modal-dialog>

attribute: overflow

Valid values: 'scroll' and 'show'.

The overflow property specifies what happens if content does or does not overflow the component box. If 'scroll' is selected, the scrollbars might appear if content is larger than the available area. If 'show' is selected, the overflow is not clipped.

The following example is for overflow='show':

Click the above button to make the modal visible.

The contents will be shown even if the size of the modal is not big enough to contain them.

Sample text

More sample text

<ch5-button label="Trigger show pulse" sendEventOnClick="trigger_2"></ch5-button>

<p>
    Click the above button to make the modal visible.
</p>
<p>
    The contents will be shown even if the size of the modal is not big enough to contain them.
</p>

<ch5-modal-dialog
        receiveStateShowPulse="trigger_2"
        customStyle="width:100px;height:150px;"
        closable
        mask
        overflow="show">
    <p>Sample text</p>
    <ch5-image
            id="ex2-img"
            url="https://picsum.photos/200/300/?random">
    </ch5-image>
    <p>More sample text</p>
</ch5-modal-dialog>