Crestron Components Lib - Showcase App

ch5-select: minWidth, maxWidth, minHeight, maxHeight, scrollWidth, resize

The select component enables the user to select one or more choices from a list of options.

The select component will NOT be a wrapper around the HTML input type select, because we need to cover other options that are not available in vanilla HTML.

The Select component allows the designer to optionally provide a template as a definition of each item in the list. Like the ch5-list, the template will use an {{Index}} moniker that will be substituted with a 1 based index of the item in the selection.


Regarding select dimensions, ch5-select supports this list of attributes:

  • - minWidth, maxWidth
  • - minHeight, maxHeight
  • - scrollHeight
  • - resize

ch5-select with width and height attributes set

ch5-select without width and height attributes

ch5-select with resize attribute. By default select panel width is equal with ch5-select width. With resize true, select panel width is given by options width and cannot exceed ch5-select parent width

<div class="row">
    <p>ch5-select with width and height attributes set</p>
    
    <ch5-select minWidth="250px" maxWidth="350px"
                 minHeight="36px"  maxHeight="48px"
                 size="5" indexId="idx" noneSelectedPrompt="Select">
        <template>
            <ch5-select-option>
                <div>
                    <span>item_{{idx}}</span>
                </div>
            </ch5-select-option>
        </template>
    </ch5-select>
    
</div>

<div class="row">
    <p>ch5-select without width and height attributes</p>
    
    <ch5-select size="5" indexId="idx" noneSelectedPrompt="Select">
        <template>
            <ch5-select-option>
                <div>
                    <span>item_{{idx}}</span>
                </div>
            </ch5-select-option>
        </template>
    </ch5-select>
    
</div>

<p>ch5-select with <strong>resize</strong> attribute. By default select panel width is equal with ch5-select width.
With resize true, select panel width is given by options width and cannot exceed ch5-select parent width</p>

<div class="row">
    
    <ch5-select id="resize-ex" resize maxWidth="250px" size="5" indexId="idx" noneSelectedPrompt="Select">
        <template>
            <ch5-select-option>
                <div>
                    <span>item_{{idx}}</span>
                </div>
            </ch5-select-option>
        </template>
    </ch5-select>
    

    <div style="margin-top: 24px">
        <button id="toggle-resize" class="button is-info" type="button">Toggle ch5-select resize attribute</button>
    </div>
</div>

The dropdown / panel containing the ch5-select options can be adjusted via the panelScrollHeight, the following examples describe some common cases.

The value of the attribute can be either in "px", "vh", "vw" or a "%"

In the example below, a max-height of 200px will be added to the ch5-select dropdown / panel

The value of the panelScrollHeight can be changed even after the ch5-select was initialized

When mode="panel" is supplied, the height of the dropdown / panel will still be computed based on the panelScrollHeight (if the attribute is provided)

In the example below, the dropdown height will be 50% of the ch5-select parent, which has a height of 300px (highlighted), therefore the computed height of the input will be 150px

If the provided value of the panelScrollHeight is 0 (regardless of the measurement unit) the panel height will default to 100% i.e. all the select options will be visible.

    <p>In the example below, a max-height of <b>200px</b> will be added to the ch5-select dropdown / panel</p>
    <div class="row">
        <ch5-select size="20" indexId="idx" panelScrollHeight="200px"
                    noneSelectedPrompt="Select">
            <template>
                <ch5-select-option>
                    <div>
                        <span>item_{{idx}}</span>
                    </div>
                </ch5-select-option>
            </template>
        </ch5-select>
    </div>

    <p>The value of the panelScrollHeight can be changed even after the ch5-select was initialized</p>
    <div class="row">
        <ch5-select id="scroll-h-ex" size="20" indexId="idx" panelScrollHeight="5vw" noneSelectedPrompt="Select">
            <template>
                <ch5-select-option>
                    <div>
                        <span>item_{{idx}}</span>
                    </div>
                </ch5-select-option>
            </template>
        </ch5-select>
        <p style="margin-top: 24px">
            <button id="update-scroll-h" class="button is-info" type="button">Update scroll height from 300px to 150px
            </button>
        </p>
    </div>

    <p>When <b>mode="panel"</b> is supplied, the <b>height</b> of the dropdown / panel will still be computed based on
        the
        <b>panelScrollHeight</b>
        (if the attribute is provided)</p>
    <i>In the example below, the dropdown height will be 50% of the ch5-select parent, which has a height of 300px
        (highlighted), therefore the computed height of the input will be 150px</i>

    <div style="height: 300px; border: 1px solid blue;">
        <ch5-select mode="panel" size="20" indexId="idx" panelScrollHeight="50%"
                    noneSelectedPrompt="Select">
            <template>
                <ch5-select-option>
                    <div>
                        <span>item_{{idx}}</span>
                    </div>
                </ch5-select-option>
            </template>
        </ch5-select>
    </div>

    <p style="margin-top: 12px; padding-top: 12px; border-top: 1px solid black;">If the provided value of the panelScrollHeight is <b>0</b> (regardless of the measurement unit) the panel height will default
    to 100% i.e. all the select options will be visible.</p>
    <div class="row" style="display: flex; justify-content: space-between; flex-direction: row">
        <div>
            <ch5-select minWidth="250px" size="20" indexId="idx" panelScrollHeight="0%"
                        noneSelectedPrompt="Select">
                <template>
                    <ch5-select-option>
                        <div>
                            <span>item_{{idx}}</span>
                        </div>
                    </ch5-select-option>
                </template>
            </ch5-select>
        </div>
        <div>
            <ch5-select minWidth="250px" size="20" indexId="idx" panelScrollHeight="0"
                        noneSelectedPrompt="Select">
                <template>
                    <ch5-select-option>
                        <div>
                            <span>item_{{idx}}</span>
                        </div>
                    </ch5-select-option>
                </template>
            </ch5-select>
        </div>
    </div>