CODEWITHSUNDEEP
xpagesxpages-extlib
Ryan Buening
Ryan Buening

Reputation: 1660

Modifying the <xp:section> Header

I have the following code:

<xp:section id="section1" type="box" header="Left Text Right Text">
    Section content
</xp:section>

I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM

Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi

Thanks in advance for any tips.

Upvotes: 0

Views: 213

Answers (1)

Patrick Sawyer
Patrick Sawyer

Reputation: 1382

I am not sure how you would do it with xpages sections, but with bootstrap you can use this.

<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>

Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?

If you are looking to do something with bootstrap sections this is what I use.

Here is some css.

.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}

And here is how I handled the div

<div class="panel-group" id="accordion">
    <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne"
                    href="#collapseOne">
                    Section Header
                </a>
            </h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">


        </div>

Not sure if this is going to get you exactly where you want to be. [edit] Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.

Upvotes: 1

Related Questions