XPages and Me

My Journey into XPages Development

Diving into Bootstrap and Font Awesome – Part 5: Checkbox Group

If you want to style your XPages Checkbox Group with Bootstrap, simply wrap it inside a div with the class “checkbox”

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.data>
		<xp:dominoDocument
			var="document1"
			formName="frmSYSTestForm">
		</xp:dominoDocument>
	</xp:this.data>
	<xp:table>
		<xp:tr>
			<xp:td>
				<xp:label
					value="First Name"
					id="iTxtFirstName_Label1"
					for="iTxtFirstName1">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText
					value="#{document1.iTxtFirstName}"
					id="iTxtFirstName1">
				</xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label
					value="Last Name:"
					id="iTxtLastName_Label1"
					for="iTxtLastName1">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText
					value="#{document1.iTxtLastName}"
					id="iTxtLastName1">
				</xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label
					value="Position:"
					id="iTxtPosition_Label1"
					for="iTxtPosition1">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText
					value="#{document1.iTxtPosition}"
					id="iTxtPosition1">
				</xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label
					value="Countries:"
					id="iTxtsCountries_Label1"
					for="iTxtsCountries1">
				</xp:label>
			</xp:td>
			<xp:td>
				<div
					class="checkbox">
					<xp:checkBoxGroup
						id="checkBoxGroup1"
						value="#{document1.iTxtsCountries}"
						xp:key="fieldFacet"
						layout="pageDirection">
						<xp:selectItem
							itemLabel="Germany"
							itemValue="Germany">
						</xp:selectItem>
						<xp:selectItem
							itemLabel="England"
							itemValue="England">
						</xp:selectItem>
						<xp:selectItem
							itemLabel="USA"
							itemValue="UST">
						</xp:selectItem>
					</xp:checkBoxGroup>
				</div>
			</xp:td>
		</xp:tr>
	</xp:table>	
</xp:view>

If you set the Checkbox Group’s property “Layout” to “Vertical”:

Image 1

It looks very nice:

Image 2

However, if you set the property “Layout” to “Horizontal”, everything looks squashed together. There is no padding between the previous label and the next checkbox:

Image 3

Doesn’t look very nice, does it?

So, how can we solve that?

There are two options:

  • Option 1: Adding css styles to the Checkbox Group
  • Option 2: Adding a setting to your theme

XPages renders a Checkbox Group as a table:

Image 4

Knowing that, we can utilize the css options border-spacing and border-collapse

Option 1: Adding css styles to the Checkbox Group

Select the Checkbox Group and open the “All Properties” tab and scroll down to the section “styling”. Enter the following css statement into the field “style”:

border-spacing: 10px;border-collapse: separate;

Your “styling” properties should now look like this:

Image 5

Open the XPage in your browser and you’ll see, it looks nice again:

Image 6

Here is the XML markup for the XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.data>
		<xp:dominoDocument
			var="document1"
			formName="frmSYSTestForm">
		</xp:dominoDocument>
	</xp:this.data>
	<xp:table>
		<xp:tr>
			<xp:td>
				<xp:label
					value="First Name"
					id="iTxtFirstName_Label1"
					for="iTxtFirstName1">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText
					value="#{document1.iTxtFirstName}"
					id="iTxtFirstName1">
				</xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label
					value="Last Name:"
					id="iTxtLastName_Label1"
					for="iTxtLastName1">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText
					value="#{document1.iTxtLastName}"
					id="iTxtLastName1">
				</xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label
					value="Position:"
					id="iTxtPosition_Label1"
					for="iTxtPosition1">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText
					value="#{document1.iTxtPosition}"
					id="iTxtPosition1">
				</xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label
					value="Countries:"
					id="iTxtsCountries_Label1"
					for="iTxtsCountries1">
				</xp:label>
			</xp:td>
			<xp:td>
				<div
					class="checkbox">
					<xp:checkBoxGroup
						id="checkBoxGroup1"
						value="#{document1.iTxtsCountries}"
						xp:key="fieldFacet"
						layout="lineDirection"
						style="border-spacing: 10px;border-collapse: separate;">
						<xp:selectItem
							itemLabel="Germany"
							itemValue="Germany">
						</xp:selectItem>
						<xp:selectItem
							itemLabel="England"
							itemValue="England">
						</xp:selectItem>
						<xp:selectItem
							itemLabel="USA"
							itemValue="UST">
						</xp:selectItem>
					</xp:checkBoxGroup>
				</div>
			</xp:td>
		</xp:tr>
	</xp:table>
</xp:view>

Option 2: Adding a setting to your theme

Now, if you’d like to have the css statements from option 1 applied automatically to every Checkbox Group you use with Bootstrap, you can also add the following to your Theme:

<control>
	<name>CheckBox</name>
	<property mode="concat">
		<name>style</name>
		<value>border-spacing: 10px;border-collapse: separate;</value>
	</property>
</control>

This will produce the same result as with Option 1, but you don’t have to worry about having to add it, every time you use the Checkbox Group.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: