Crestron Components Lib - Showcase App

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 overlay visible.

Sample text

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

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

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

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 overlay visible.

The contents will be shown even if the size of the overlay 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 overlay visible.
</p>
<p>
    The contents will be shown even if the size of the overlay is not big enough to contain them.
</p>

<ch5-overlay-panel
        receiveStateShowPulse="trigger_2"
        customStyle="width:100px;height:150px;"
        closable
        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-overlay-panel>