1

I have defined simple titlePane dijits in Xpages which uses the ExtLib Bootstrap theme.

When the titlePane is collapsed I get an (closed) arrow icon displayed.

When the titlePane is expanded I get the indication that the icon for a caret-down can not be found.

When I disable the Bootstrap theme and run oneUI when collapsed no icon is diplayed BUT when I expand the titlepane a nice carot-down icon is displayed.

Is this due to a failure of the implementation of Bootstrap in the ExtLib?

here is my code:

<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>

In the generated HTML for an open or closed titlepane I notice the following differences:

<div id="view:_id1:_id37:titlePaneGemCars_titleBarNode" data-dojo-attach-point="titleBarNode" class="dijitTitlePaneTitle dijitTitlePaneTitleOpen dijitOpen" data-dojo-attach-event="ondijitclick:_onTitleClick, onkeydown:_onTitleKey">

and

<div id="view:_id1:_id37:titlePaneGemCars_titleBarNode" data-dojo-attach-point="titleBarNode" class="dijitTitlePaneTitle dijitTitlePaneTitleClosed dijitClosed" data-dojo-attach-event="ondijitclick:_onTitleClick, onkeydown:_onTitleKey">

so the open titlepane has got the dijitTitlePaneTitleOpen dijitOpen class and the closed one the dijitTitlePaneTitleClosed dijitClosed class.

I can alter the stylesheet for the down caret e.g.

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

which works as a temporarily solution

Patrick Kwinten
  • 1,988
  • 2
  • 14
  • 26

1 Answers1

2

Yep this is a problem due to a missing CSS style for the TitlePane's down caret in the Extlib Bootstrap themes. I've logged the issue as SPR#BGLNA38EDW, and we will look to address it in an upcoming extension library release. In the meantime you can use the work-around you've suggested.

UPDATE: A fix has been delivered for this, and should show up in the next Extension Library release.

Brian Gleeson - IBM
  • 2,565
  • 15
  • 21