Crestron Components Lib - Showcase App

ch5-overlay-panel: positionTo

positionTo

The id of an HTML element that will be a reference for positioning the overlay. The '#' character is optional

Please note that the ch5-overlay-panel will also change its position in the DOM so that it becomes a sibling of the reference element

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>

<div id="ref-el1" style="border:1px solid blue; width:200px;height:25px"></div>

<ch5-overlay-panel
        receiveStateShowPulse="trigger_1"
        closable
        positionTo="ref-el1"
        positionOffset="bottom-left">
  <p>Sample text</p>
  <ch5-image
          id="ex1-img"
          url="https://picsum.photos/200/300/?random">
  </ch5-image>
</ch5-overlay-panel>