Working examples

This is not a Government of Canada website

The purpose of this website is to provide a working example of the WET-BOEW-Moodle theme created by TNG Consulting Inc. together with the Government of Canada. Demo courses are only available in English however multi-language courses are supported.

Forms - has minor issues

Style guide information

Compatibility notice

The Set Width and Input example uses the WET form-control class which is overridden by the Moodle implementation of a form-control class. To make the form-control class apply a width of 100% instead of auto, simply add a wetboew class to the <form> tag. Example: <form class="wetboew"...> This will cause elements with a form-control class to occupy 100% of their container's space.

Known issues:

  • WET form validation upon submission does not work. You can still do HTML5 validation if you do not include novalidate="novalidate" from the <form> tag.

Basic use

Appearance

Labels

Appearance
Alignment option 1 − Placed on top


Alignment option 2 − Aligned right

Inputs

Appearance
Input field
Input field with a Search button

Textarea

Appearance

Checkboxes

Appearance
Default checkboxes

Inline checkboxes

Radio buttons

Appearance
Radio buttons

Inline radio buttons

Selects

Appearance
Dropdown list with single option view

Dropdown list with multi-option view

Horizontal form

Appearance
Dropdown list with single option view

Dropdown list with multi-option view

Inline form

Appearance

Static control

Appearance

Disabled state

Appearance

Set height

Appearance

Set width

Appearance

Fieldsets borders

Appearance
Identification Information
Contact Information
Last modified: Wednesday, 19 February 2020, 7:08 AM
Date modified: