Crestron Components Lib - Showcase App

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

ch5-select:


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 on HTML input type select.

The Select component allows the designer to optionally provide a template as a definition of each item in the list. Like the List component, the template will use a 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 panelScrollHeight attribute. panelScrollHeight should be a number value that represents the options panel height in px

ch5-select with resize attribute. By default select panel width is equal with ch5-select width. With resize true, select panel width si 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>panelScrollHeight</strong> attribute. panelScrollHeight should be a number value that
represents the options panel height in px</p>

<div class="row">
    
    <ch5-select id="scroll-h-ex" size="20" indexId="idx" panelScrollHeight="300" 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 300 to 150</button>
    </p>
</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 si 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>