Custom CSS codes may be used in combination with HTML to create job designs with highly customized styling. You can insert CSS codes in your job by navigating to the Design tab, click "Switch to Code Editor", and then select "Show Custom CSS/JS" to open the CSS code editor.
The table below highlights a non-exhaustive list of CSS/HTML code snippets for frequently requested special stylings.
Purpose | CML | CSS |
Display a group of checkboxes in two columns rather than one vertical column |
Create a div around the checkbox group:
<div class="check_row"> |
Insert the following code in the CSS editor:
.check_row { |
Display a group of checkboxes horizontally rather than vertically | N/A |
Insert the following code in the CSS editor:
.cml_row { |
Add borders to tables in Instructions | N/A |
Insert the following code in the CSS editor:
table, tr, td { |
Bootstrap to display any CML elements horizontally rather than vertically |
Wrap the elements you want horizontally in a div, using divs with spans defined for each element:
<div class="row row-fluid"> |
N/A |
Hide '(Required)' from displaying next to a required CML field | N/A |
Insert the following code in the CSS editor:
.required{ |
Change width of text box | N/A |
Insert the following code in the CSS editor:
.cml .cml_field |
Create a scrollable area |
Wrap the scrollable area in a div:
<div style="overflow:scroll;height:300px"> |
N/A |
Use right-to-left text rendering in job design. NOTE: Only extends to tool text, not to data text. |
Wrap elements requiring right-to-left text rendering in the following div:
OR
|
N/A |
Disable pre-loaded annotations from being edited in shapes tool |
Wrap a div around the shapes tool:
<div class="well no_touchy" width="100%"> |
Insert the following code in the CSS editor:
.no_touchy{ |
Create space underneath an element |
Wrap the section you want to add space beneath in a div: <div class="input"> |
Insert the following code in the CSS editor:
.input{ |