Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame^] | 1 | <p>The<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/select" target="_blank"> |
| 2 | HTML select</a> (<select>) element represents a control that presents a menu of options. |
| 3 | The options within the menu are represented by <option> elements, which can be grouped by |
| 4 | <optgroup> elements. Options can be pre-selected for the user.</p> |
| 5 | |
| 6 | <p>The Material Design Lite Ext (MDLEXT) <strong>select field</strong> component is an enhanced version of the standard |
| 7 | HTML <select> element. A select field consists of a horizontal line indicating where keyboard input |
| 8 | can occur and, typically, text that clearly communicates the intended contents of the select field. |
| 9 | An icon (at the right hand side) indicates that the select field has user selectable options.</p> |
| 10 | |
| 11 | <p><strong>Note: </strong> |
| 12 | The select field can for some browser and OS combinations, e.g. FireFox and OSX, be off by 2 pixels compared to the |
| 13 | input field. There is no way to fix this, as far as I know, without setting an explicit height on both field types. |
| 14 | Since MDL does not set a specific height of the text field, it can not be done for the select field either. |
| 15 | If alignment is required, the user must in his/hers design set a specific height both for textfields and selectfields. |
| 16 | </p> |
| 17 | |
| 18 | <style scoped> |
| 19 | .selectelement-demo-container { |
| 20 | } |
| 21 | .selectelement-demo-container .mdl-cell { |
| 22 | padding: 0 4px 16px 0; |
| 23 | } |
| 24 | .selectelement-demo-container .mdl-cell p { |
| 25 | margin-bottom: 0; |
| 26 | white-space: nowrap; |
| 27 | text-overflow: ellipsis; |
| 28 | overflow: hidden; |
| 29 | } |
| 30 | </style> |
| 31 | |
| 32 | <div class = "selectelement-demo-container"> |
| 33 | |
| 34 | <div class="mdl-grid mdl-grid--no-spacing"> |
| 35 | |
| 36 | <div class="mdl-cell mdl-cell--3-col"> |
| 37 | <p>Selectfield component</p> |
| 38 | <div class="mdlext-selectfield mdlext-js-selectfield"> |
| 39 | <select class="mdlext-selectfield__select"> |
| 40 | <option value=""></option> |
| 41 | <option value="option1">option 1</option> |
| 42 | <option value="option2">option 2</option> |
| 43 | <option value="option3">option 3</option> |
| 44 | <option value="option4">option 4</option> |
| 45 | <option value="option5">option 5</option> |
| 46 | <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| 47 | </select> |
| 48 | <label class="mdlext-selectfield__label">Profession</label> |
| 49 | </div> |
| 50 | </div> |
| 51 | |
| 52 | <div class="mdl-cell mdl-cell--3-col"> |
| 53 | <p>Textfield component</p> |
| 54 | <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
| 55 | <input class="mdl-textfield__input" type="text"> |
| 56 | <label class="mdl-textfield__label">... to check alignment</label> |
| 57 | </div> |
| 58 | </div> |
| 59 | |
| 60 | <div class="mdl-cell mdl-cell--3-col"> |
| 61 | <p>Selectfield component with floating label</p> |
| 62 | <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| 63 | <select class="mdlext-selectfield__select"> |
| 64 | <option value=""></option> |
| 65 | <option value="option1">option 1</option> |
| 66 | <option value="option2">option 2</option> |
| 67 | <option value="option3">option 3</option> |
| 68 | <option value="option4">option 4</option> |
| 69 | <option value="option5">option 5</option> |
| 70 | <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| 71 | </select> |
| 72 | <label class="mdlext-selectfield__label">Profession</label> |
| 73 | </div> |
| 74 | </div> |
| 75 | |
| 76 | <div class="mdl-cell mdl-cell--3-col"> |
| 77 | <p>Disabled selectfield component</p> |
| 78 | <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| 79 | <select class="mdlext-selectfield__select" disabled> |
| 80 | <option value=""></option> |
| 81 | <option value="option1">option 1</option> |
| 82 | <option value="option2">option 2</option> |
| 83 | <option value="option3">option 3</option> |
| 84 | <option value="option4">option 4</option> |
| 85 | <option value="option5">option 5</option> |
| 86 | <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| 87 | </select> |
| 88 | <label class="mdlext-selectfield__label">Profession</label> |
| 89 | </div> |
| 90 | </div> |
| 91 | |
| 92 | <div class="mdl-cell mdl-cell--3-col"> |
| 93 | <p>Unstyled select element</p> |
| 94 | <select style="width: 100%;"> |
| 95 | <option value=""></option> |
| 96 | <option value="option1">option 1</option> |
| 97 | <option value="option2">option 2</option> |
| 98 | <option value="option3">option 3</option> |
| 99 | <option value="option4">option 4</option> |
| 100 | <option value="option5">option 5</option> |
| 101 | <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| 102 | </select> |
| 103 | <label>Profession</label> |
| 104 | </div> |
| 105 | |
| 106 | <div class="mdl-cell mdl-cell--3-col"> |
| 107 | <p>Unstyled input element</p> |
| 108 | <input type="text" style="width: 100%;"> |
| 109 | <label>... to check alignment</label> |
| 110 | </div> |
| 111 | |
| 112 | </div> |
| 113 | </div> |