In my last post, I showed how to automatically set the class name to pick up Bootstrap styling on all text fields in an XPages application via the theme. In this post, I’ll show how to set the class name on multiline fields and field labels as well.
If I update the form from the last post to include a multiline edit box, it will look this (if I already have the code from the last post included in the theme):
The multiline edit box doesn’t match and the field labels also aren’t picking up Bootstrap styling.
This code in the theme will update the multiline edit box controls to pick up the required form-control class:
<!-- Set all multiline inputs to Bootstrap styling -->
<control>
<name>InputField.TextArea</name>
<property mode="concat">
<name>styleClass</name>
<value>form-control</value>
</property>
</control>
This code will automatically provide the class to all field labels via the theme:
<!-- Set all labels to Bootstrap styling -->
<control>
<name>Text.Label</name>
<property mode="concat">
<name>styleClass</name>
<value>control-label</value>
</property>
</control>
Now, everything on the form is picking up the correct styling:
