| <p>The<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/select" target="_blank"> |
| HTML select</a> (<select>) element represents a control that presents a menu of options. |
| The options within the menu are represented by <option> elements, which can be grouped by |
| <optgroup> elements. Options can be pre-selected for the user.</p> |
| |
| <p>The Material Design Lite Ext (MDLEXT) <strong>select field</strong> component is an enhanced version of the standard |
| HTML <select> element. A select field consists of a horizontal line indicating where keyboard input |
| can occur and, typically, text that clearly communicates the intended contents of the select field. |
| An icon (at the right hand side) indicates that the select field has user selectable options.</p> |
| |
| <p><strong>Note: </strong> |
| The select field can for some browser and OS combinations, e.g. FireFox and OSX, be off by 2 pixels compared to the |
| input field. There is no way to fix this, as far as I know, without setting an explicit height on both field types. |
| Since MDL does not set a specific height of the text field, it can not be done for the select field either. |
| If alignment is required, the user must in his/hers design set a specific height both for textfields and selectfields. |
| </p> |
| |
| <style scoped> |
| .selectelement-demo-container { |
| } |
| .selectelement-demo-container .mdl-cell { |
| padding: 0 4px 16px 0; |
| } |
| .selectelement-demo-container .mdl-cell p { |
| margin-bottom: 0; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| </style> |
| |
| <div class = "selectelement-demo-container"> |
| |
| <div class="mdl-grid mdl-grid--no-spacing"> |
| |
| <div class="mdl-cell mdl-cell--3-col"> |
| <p>Selectfield component</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield"> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--3-col"> |
| <p>Textfield component</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">... to check alignment</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--3-col"> |
| <p>Selectfield component with floating label</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--3-col"> |
| <p>Disabled selectfield component</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| <select class="mdlext-selectfield__select" disabled> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--3-col"> |
| <p>Unstyled select element</p> |
| <select style="width: 100%;"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label>Profession</label> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--3-col"> |
| <p>Unstyled input element</p> |
| <input type="text" style="width: 100%;"> |
| <label>... to check alignment</label> |
| </div> |
| |
| </div> |
| </div> |