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:

titlepane_error

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

titlepane_oneUI

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:

titlepane_fixed

Happy coding!

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

4 thoughts on “fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib

  1. Patrick Kwinten 2015-October-12 / 1:59 pm

    Hi Brian, I noticed I also have an Dojo Accordian Container on my page, and when I remove this the dijit.TitlePane gets the plus or minus signs…

  2. Brian Gleeson (@BGleesonIE) 2015-October-13 / 5:19 pm

    A fix for the dijit.TitlePane issue has been delivered, and should show up in the next Extension Library release. I don’t quite follow your follow-up question, another stackoverflow question needed with the details?

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