Changes for page Forms Standards: Vertical Layout
Last modified by Lucas Charpentier (Sereza7) on 2024/03/26
From version 8.3
edited by Ecaterina Moraru (Valica)
on 2011/09/01
on 2011/09/01
Change comment:
There is no comment for this version
To version 9.1
edited by Ecaterina Moraru (Valica)
on 2012/01/16
on 2012/01/16
Change comment:
added documentation about .disabled class available starting with XE 3.4 RC1
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -26,15 +26,15 @@ 26 26 |span | | |##.xHint## | |dt |Attach hint information to a control\\ 27 27 |span | | |##.xErrorMsg## | |dt |Alert or error information for the control\\ 28 28 |input | hidden | | | | |\\ 29 -|input | text |size=60 | | 29 +|input | text |size=60 | |##.disabled## |dd |\\ 30 30 | | | | |##.xErrorField##|dd |Alert or error triggering control\\ 31 -|input | password |size=60 | | 31 +|input | password |size=60 | |##.disabled## |dd |\\ 32 32 | | | | |##.xErrorField##|dd |Alert or error triggering control\\ 33 33 |input | radio | | | | |\\ 34 34 |input | checkbox | | | | |\\ 35 -|input | submit | |##.button## |##.secondary## 36 -|input | button | |##.button## |##.secondary## 37 -|a | | |##.button## |##.secondary## 35 +|input | submit | |##.button## |##.secondary## ##.disabled##|span##.buttonwrapper##|Button controls\\ 36 +|input | button | |##.button## |##.secondary## ##.disabled##|span##.buttonwrapper##|Button controls\\ 37 +|a | | |##.button## |##.secondary## ##.disabled##|span##.buttonwrapper##|Button controls\\ 38 38 |textarea | |rows=7 cols=45| | | |\\ 39 39 | | | | |##.xErrorField##|dd |Alert or error triggering control\\ 40 40 |select | |size=1 | | | |\\ ... ... @@ -392,16 +392,42 @@ 392 392 393 393 ==== [css] ==== 394 394 395 -.buttonwrapper and .button classes are described in colibri.css 395 +.buttonwrapper and .button (.secondary) classes are described in colibri.css 396 396 397 -{{code language="css"}} 398 -.buttonwrapper input.secondary, .buttonwrapper a.secondary { 399 - background-color: $theme.buttonSecondaryBackgroundColor; 400 - color: $theme.buttonSecondaryTextColor; 401 -} 397 +=== 7. Disabling === 398 + 399 +* Use .disabled class if you want to have disabled input elements 400 + 401 +==== [preview] ==== 402 + 403 +[[image:disabledElements.png]] 404 + 405 +==== [html] ==== 406 + 407 +{{code language="html"}} 408 + <dd> 409 + <input type="text" class="disabled" disabled="disabled" ... /> 410 + </dd> 411 +... 412 + <span class="buttonwrapper"> 413 + <input type="submit" class="button" value="Primary" ... /> 414 + </span> 415 + <span class="buttonwrapper"> 416 + <input type="submit" class="button disabled" disabled="disabled" value="Primary Disabled" ... /> 417 + </span> 418 + <span class="buttonwrapper"> 419 + <input type="submit" class="button secondary" value="Secondary" ... /> 420 + </span> 421 + <span class="buttonwrapper"> 422 + <input type="submit" class="button secondary disabled" disabled="disabled" value="Primary Disabled" ... /> 423 + </span> 424 +... 425 + <span class="buttonwrapper"> 426 + <a href="." class="secondary button disabled" ... >Secondary Disabled</a> 427 + </span> 402 402 {{/code}} 403 403 404 -=== 7. Grouping ===430 +=== 8. Grouping === 405 405 406 406 * Grouping can be done by using fieldset/legend or other markup (like headers) 407 407
