Twitter Bootstrap Question posted in

Unable to Bootstrap Small Well with XPages Extension Library – Twitter bootstrap

In an XPages application that’s using Bootstrap I’m trying to make a “well-sm” and I’m getting the padding of the bigger “well”.

I have this code: 

<xp:div styleClass="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <xp:div styleClass="well well-sm" id="RecentJob">
            <xp:text escape="true" id="computedField5" value="#{jobData.formattedJobCode}"></xp:text>
                <br />
                <xp:text escape="true" id="computedField6" value="#{jobData.jobDesc}"></xp:text>
                <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:context.redirectToPage("job.xsp?jobId=" + jobData.getId())}]]></xp:this.action>
                </xp:eventHandler>
        </xp:div>
</xp:div>

And when I render my page I’m not getting the padding of the “well-sm”. I’m only getting the padding of “well”. When I inspect the css in Chrome it looks like it’s being over written by “.dbootstrap .well”. I don’t know where this is coming from. I assume it’s something inside the Ext. Library and maybe the “d” stands for dojo but I’m not sure. We’re not on the most recent version of the Ext. Library, we’re on the second most recent. So it’s providing Bootstrap 3.2.0.

Anyone know where this dboostrap styling is coming from and how I can avoid it?

Note: I’ve added the tag twitter-bootstrap for later searching but I’m sure this is specific to the XPages environment.

Thanks!

Inspected Styles

Tags:

2

Answers


  1. 0

    It looks like is a DojoTheme for bootstrap in the Ext Lib as you expected

    <!-- dbootstrap styles -->
    <resource dojoTheme="true">
        <content-type>text/css</content-type>
        <href>/.ibmxspres/.extlib/responsive/dijit/dbootstrap-0.1.1/theme/dbootstrap/dbootstrap.css</href>
    </resource>

    But it is rendered as last css, so it override the native bootstrap css and that is my opinion not correct. May be you should raise this issue on Github of the Extension Library.

    I found a comment of Brian Gleeson about this issue, comments section https://quintessens.wordpress.com/2015/10/14/collapsible-menu-with-persistent-state/

    Login or Signup to reply.
  2. 0

    Not sure if you can avoid it, but creating a more specific css selector would override it for sure. I’d use id of the element to set desired spacing if I were you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search