[SalesForce] Lightning component / bootstrap – collapsible rows not working

I've created a lightning component (called from a VF page using $Lightning.use) which contains a table of tables (product class, then a list of products for that product class). I'm trying to use bootstrap's "collapse" functionality to expand/collapse the product listing detail for each product class, and getting weird results:

  • doesn't work at all
  • works only the first time I click on a row
  • works for a while, then it seems that after all components (there are multiple comps on the page) have finished rendering, it stops working

Also note there is another component that is also trying to do similar functionality (same results).

Is there something withing the framework that is overriding the bootstrap js functionality that I've missed? I think I have the scripts/css loaded properly, but I'm a Lightning component noob. FWIW I have been able to successfully implement this functionality in VF pages / components.

component:

<aura:component controller="ProductListingController_COM" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
<ltng:require scripts="/resource/jquery191min/jquery-1.9.1.min.js, /resource/Bootstrap_3_1_1/bootstrap-3.1.1-dist/js/bootstrap.min.js"
    styles="/resource/BootstrapSF1/dist/css/bootstrap-namespaced.min.css"/>
<aura:attribute name="ProdClassWraps" type="ProductListingController_COM.prodClassWrapper[]"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<div class="_slds bootstrap-sf1">
    <div id="mainContent" class="panel panel-default slds-card">
        <aura:iteration items="{!v.ProdClassWraps}" var="cl" indexVar="i">
            <!-- product class table; clicking on row is supposed to expand
                    product listing for that class -->
            <table class="panel-table table" data-toggle="collapse" 
                   data-target="{!'#collapseProdList' + i}" href="{!'#collapseProdList' + i}">
                <col style="width:50%;"/>
                <col style="width:25%;"/>
                <col style="width:25%;"/>
                <tr style="vertical-align:top;font-style:bold;">
                    <td style="padding-right:5px;"><ui:outputText value="{!cl.prodClass}"/></td>
                    <td style="padding-right:5px;"><ui:outputText value="{!'Purchased: ' + cl.totalPurcQty}" /></td>
                    <td><ui:outputText value="{!'Active: ' + cl.totalActiveQty}"/></td>
                </tr>
            </table>
            <!-- product listing detail for each product class;
                    this table is supposed to expand when header row (above) is clicked -->
            <table id="{!'collapseProdList' + i}" 
                   class="slds-table slds-max-medium-table--stacked-horizontal slds-table--striped table panel-collapse collapse">
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>Description</th>
                        <th>Qty Purchased (Since 04/01/2012)</th>
                        <th>Active Qty</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!cl.pList}" var="obj">
                    <tr>
                        <td>{!obj.Name}</td>
                        <td>{!obj.Description__c} 
                            <aura:if isTrue="{! !empty(obj.System_Vendor__c)}">&nbsp;{!obj.System_Vendor__c}</aura:if></td>
                        <td>{!obj.Purchased_since_2012__c}</td>
                        <td>{!obj.Active_Qty__c}</td>
                    </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </aura:iteration>
    </div>
</div>

Best Answer

Indeed, Lightning (such as VisualForce) has its own pre-implemented css. So does Bootstrap (obviously). Therefore when you compile these two, there are possible conflicts because of sharing names.

At compilation, the generated css names (h1, h2, etc.) from Lightning will get mixed up with the css coming from bootstrap. So when a JavaScript function will call a certain div, depending on the compilation, the div from Bootstrap will answer or the div from Lightning.

I see that from the bootstrap downloable source there is a namespaced element (folder bootstrap-sf1-0.1.0-beta.15\less\namespaced.less)

/* these styles are from bootstrap's html and body selectors, so they should be applied to the namespaced container element */
.bootstrap-sf1 { .. }

the JavaScript will call it (I guess ..) with this prefix in a way that will make sure the divs from Bootstrap don't get mixed up with these from Lightning.

At the time I had this kind of problem, I used this source to enable all the bootstrap possibilities into my VF pages. I can see it working for Lightning as well.

Related Topic