CODEWITHSUNDEEP
twitter-bootstrapxpages-extlib
Uwe J.
Uwe J.

Reputation: 315

xpages application layout bootstrap 3 - error in right column

If I use bootstrap divs in the right column of the appLayout, I get the "funny" effect that in screen size sm the right column overlays the center column. I think it's a missing definition in the div class of the right column (code automatically generated from the XPages ExtLib):

<div class="row">
    <div class="col-md-10 col-sm-9 applayout-content"> ... </div>
    <div class="col-md-2 col-sm-3 applayout-column-right">
        <div class="well" style="height:400px;">Right Column</div>
    </div>
</div>

When I enter a col-sm definition in firebug like this: 

<div class="row">
    <div class="col-md-10 col-sm-9 applayout-content"> ... </div>
    <div class="col-md-2 col-sm-3 applayout-column-right">
        <div class="well" style="height:400px;">Right Column</div>
    </div>
</div>

It works as expected, the effect is gone. Am I missing something, or is it a bug in the ExtLib application layout control?

XPages on 9.0.1 server, ExtLib version is 901v00_16.20160128-1014

Uwe

Upvotes: 0

Views: 138

Answers (2)

Brian Gleeson - IBM
Brian Gleeson - IBM

Reputation: 2565

You are correct, this is a bug in the application layout control when using the bootstrapResponsiveApplicationConfiguration. I have reproduced the issue in an app using Bootstrap3.theme and a well in the right column facet. The missing col-sm class is indeed the cause, as you suggested.

I have logged the issue on our github repository for the ExtLib. A fix will be delivered for this issue in the next release of the Extension Library. Thanks for highlighting/finding it.

UPDATE: The fix for this issue is in the latest ExtLib release, ExtLib 17, which was released on the openntf site yesterday (2nd June 2016)

Upvotes: 1

nallenanderson
nallenanderson

Reputation: 96

Is the "col-md-10 col-sm-9 applayout-content" supposed to be closed so that the two appear side by side?

<div class="row">
    <div class="col-md-10 col-sm-9 applayout-content">
        Some text here...
    </div>
    <div class="col-md-2 col-sm-3 applayout-column-right">
        More text here...
    </div>
</div>

Upvotes: 0

Related Questions