HTML attributes

Edit online

The HTML Attributes page is where you override styles for a specific view instance.

Overriding a style consists of the following things:
  • An HTML class attribute in each view instance that you want to specifically style
  • A corresponding CSS rule for that class attribute
Important: Do not use the following names as CSS class names in your HTML source code because they are reserved names:
  • CoachView
  • ContentBox
Additionally, ensure that the names of the CSS classes do not collide with the names of the views. A collision can lead to unpredictable styling at run time because the view name is automatically added for scoping purposes to the class attribute of the view wrapper div.
For example, text boxes have their labels above the text area. However, you want the label to be to the left of the text area.
Default label position Overridden to move the label
text box with its label on top
text box with its label to the left
To move the label:
  1. Add a class to the HTML attributes of the text box instance. For example, click Add Class and then in Class name, type myText.
  2. In CSS code, define the style for the class. For example, define the myText class to override the styles for the label position: 
    .myText.Output_Text .outputTextLabel,
.Text .textLabel {
display: inline-block;
width: 100px;
}
.myText.Text .content {
display: inline-block;
}
  3. In any parent view, add the CSS rule to a .css file and add that file as an included script. If the view is a top-level view in a coach, add a custom HTML item that contains the style rule.