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

HTML
JS
CSS

<div class="custom-div">
		<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="custom-div">
		<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="custom-div">
		
		<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>

document.getElementById('toggle-resize').addEventListener('click', function(){
	 const ch5select = document.getElementById('resize-ex');
	 if (ch5select.hasAttribute('resize')) {
				ch5select.removeAttribute('resize');
	 } else {
				ch5select.setAttribute('resize', true);
	 }
});

.custom-div {
		padding: 24px 0;
}

Execute JS before HTML

Preview

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

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 "%"

HTML
JS
CSS

		<p>In the example below, a max-height of <b>200px</b> will be added to the ch5-select dropdown / panel</p>
		<div class="custom-div">
				<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="custom-div">
				<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="custom-div" 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>

(function () {
		const updateButton = document.getElementById('update-scroll-h');
		const ch5select = document.getElementById('scroll-h-ex');

		updateButton.addEventListener('click', () => {
				ch5select.setAttribute('panelScrollHeight', '300px');
		});
})()

.vertical-list-item {
		display: table;
		width: 100%;
		height: 100%;
}

.vertical-list-item span {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
}

Execute JS before HTML

Preview

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.