fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib

For unknown reason the dijit.TitlePane is not part of the Dojo controls in the ExtLib. You can implement your own version and Mark Roden posted a nice description how to achieve this. HOWEVER in case you are using the Bootstrap theme in the Extension Library you will notice when opening a pane the down caret icon can not be displayed.

Here is the build up for 2 TitlePanes dijits:

<xp:div id=”titlePaneGemCars” dojoType=”dijit.TitlePane” title=”German Cars”>
Audi
BMW
Mercedes
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
</xp:div>
<xp:div id=”titlePaneJapBikes” dojoType=”dijit.TitlePane”
title=”Japanese Bikes”>
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
Honda
Suzuki
Yamaha
</xp:div>

Here is how it looks like in the browser:

In case you choose another theme e.g. oneUI (*cough*) the panes are displayed as followed:

Note the display of carets is different (no carets for closed panes).

So how are we going to fix this? Via your friend CSS! Include the following CSS snippet at your page/stylesheet/theme:

.xsp.dbootstrap .dijitTitlePane .dijitArrowNode::before {
color: #428bca;
font-family: “Glyphicons Halflings”;
content: “\e114”;
font-size: 12px;
padding-left: 10px;
position: relative;
top: -1px;
}

The definition is similar for a closed dijit but the content is set here to specific Glyphicon (the chevron down icon). The content is set to a hexidecimal value for an icon? On the glyphicons site you can search for halflings and it will tell for the chevron-down icon the value is UTF+e114.

As a result your opened titlepane wil have the correct icon displayed:

Happy coding!

Ps I assume there is someone smart here to register this break as a request at IBM?