HTML attributes

Overriding a style consists of the following things:

• An HTML class attribute in each coach view instance that you want to specifically style
• A corresponding CSS rule for that class attribute

Additionally, ensure that the names of the CSS classes do not collide with the names of the coach views. A collision can lead to unpredictable styling at runtime because the coach view name is automatically added for scoping purposes to the class attribute of the coach 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.

To move the label, do the following steps:

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 coach view, add the CSS rule to a .css file and add that file as an included script. If the coach view is a top-level view in a coach, add a custom HTML item that contains the style rule.