Crestron Components Lib - Showcase App

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

attribute: overflow

Valid values are 'scroll' and 'show'.

The overflow property specifies what happens if content overflows the component box or not. 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 are 'scroll' and 'show'.

The overflow property specifies what happens if content overflows the component box or not. 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>