DropDownList CSS Styling
Smart.DropDownList represents a selection field that acts as a button and when clicked it opens/closes a list of selectable items.
The Smart.DropDownList element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:
- smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
- smart.button.js — this file defines the functionality of the Smart.Button custom element. Smart.ScrollBar uses repeat buttons.
- smart.scrollbar.js — this file defines the functionality of the Smart.ScrollBar custom element.
- smart.listbox.js — this file defines the functionality of the Smart.ListBox custom element used in the Smart.DropDownList.
- smart.dropdownlist.js — this file defines the functionality of the Smart.DropDownList custom element.
Smart.DropDownList also requires the following style sheets in order to be displayed correctly.
- smart.base.css — the base style sheet file.
To create an instance of a Smart.DropDownList custom element, insert the following tag in an HTML page:
To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:
Getting and setting properties dynamically
let customElement = document.querySelector('smart-drop-down-list');
Properties are represented as members of the custom element’s instance object and can be accessed as such.
Here is an example showing how to get a property dynamically:
let selectedIndexes = customElement.selectedIndexes;
Here is an example showing how to set a property dynamically:
customElement.selectedIndexes = [1,2,3];
Styling (CSS API)
Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.
The following CSS selectors can be used to style Smart.DropDownList:
smart-drop-down-list – the element itself. Can be used to set width and height for the whole element.
- .smart-container – the container that holds all of the internals of the element. Shoudn’t be used for styling.
- .smart-action-button – an HTML SPAN element used as an action button.
- .smart-drop-down-button – an HTML Span element used as a button for the listBox drop down.
- smart-list-box – Smart.ListBox – the popup. Can be styled like every other Smart.ListBox element.
Smart.DropDownList uses the following CSS variable:
- –smart-drop-down-list-default-width – a CSS variable used to set the default width of the element. Default value is 150px.
- –smart-drop-down-list-default-height – a CSS variable used to set the default height of the element. Default value is 30px.
- –smart-drop-down-element-width – a CSS variable used to set the width of the drop down element. Default value is ‘auto’.
- –smart-drop-down-element-height – a CSS variable used to set the height of the drop down element. Default value is 200px.
- –smart-drop-down-button-width – a CSS variable used to set the width of the drop down element. Default value is 30px.
By default the animation for the Smart.DropDownList is disabled. It can be enabled by adding the CSS class called “animation” to the element, like so: