0

I have a lightning component representing a search result that only renders its contents if it matches a given search string (utilizing aura:if). On the initial rendering of the component, its associated CSS appears to be working correctly, but upon subsequent renderings the CSS no longer appears to be working. The two images below show the difference:

First rendering: enter image description here

Subsequent rendering(s): enter image description here

This is the component that represents a single search result:

<aura:component extends="c:SearchableSObject">
<aura:attribute name="accountName" type="String"/>
<aura:attribute name="accountNumber" type="String"/>
<aura:attribute name="billingStreet" type="String"/>
<aura:attribute name="billingCity" type="String"/>
<aura:attribute name="billingState" type="String"/>
<aura:attribute name="billingPostalCode" type="String"/>
<aura:attribute name="billingCountry" type="String"/>    
<aura:attribute name="dba" type="String"/>
<aura:attribute name="salesforceId" type="String"/>
<aura:attribute name="searchableData" type="String"/>
<aura:registerEvent name="filterPatientsApplicationEvent" type="c:FilterPatients"/>
    <div class="radioolumn">
        <label class="slds-radio">   
            <ui:inputRadio aura:id="radios" label="" name="SearchableSObjectSelect" click="{!c.selectAccount}" value="{!v.selected}"/>
            <span class="slds-radio--faux"></span>
        </label>    
    </div>
    <div class="content-column">
        <div class="custom-card">
            <div class="left-column">
                <h3 class="slds-text-heading--medium">{!v.accountName}</h3>   
                <br/>
                <h3 class="slds-text-heading--small">Account Number</h3>
                <div>{!v.accountNumber}</div>
            </div>

            <div class="middle-column">
                <br/>
                <br/>
                <h3 class="slds-text-heading--small">Address</h3>
                <div class="slds-text-body--regular">{!v.billingStreet}</div>
                <div class="slds-text-body--regular">{!v.billingCity + ', ' + v.billingState}</div>
                <div class="slds-text-body--regular">{!v.billingPostalCode}</div>
            </div>

            <div class="right-column">
                <br/>
                <br/>
                <h3 class="slds-text-heading--small">DBA</h3>
                <div class="slds-text-body--regular">{!v.dba}</div>
            </div>
        </div>    
    </div>


</aura:component>

Here is the style of the above component:

.THIS .custom-card{
    padding: 25px !important;
    height: 150px;
    width: 750px;
    border-radius: 5px;
    border: 1px solid #dadee5;
}

.THIS .left-column{
    float: left;
    width: 33%;
}

.THIS .middle-column{;
    float: left;
    width: 33%;
}

.THIS .radio-column{
    float: left;
    padding: 75px;
    width: 50px;
}

.THIS .content-column{
    float: left;
    width: 100px;
}

This is the component that it extends (SearchableSObject), which performs the rerendering with aura:if. It does not have a CSS document. :

<aura:component extensible="true">
    <aura:attribute name="name" type="String" default=""/>
    <aura:attribute name="matchesSearch" type="Boolean" default="true"/>
    <aura:attribute name="searchableData" type="String" default=""/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <aura:attribute name="sobjectType" type="String" default=""/>
    <aura:handler event="c:UpdateSearchResults" action="{!c.matchSearchText}" includeFacets="true"/> 
     <aura:handler event="c:ClearSObjectSelection" action="{!c.clearSelection}"/>
    <aura:if isTrue="{!v.matchesSearch}">   
        <tr>{!v.body}</tr>
    </aura:if>
</aura:component>

<aura:component extensible="true">
    <aura:attribute name="name" type="String" default=""/>
    <aura:attribute name="matchesSearch" type="Boolean" default="true"/>
    <aura:attribute name="searchableData" type="String" default=""/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <aura:attribute name="sobjectType" type="String" default=""/>
    <aura:handler event="c:UpdateSearchResults" action="{!c.matchSearchText}" includeFacets="true"/> 
     <aura:handler event="c:ClearSObjectSelection" action="{!c.clearSelection}"/>
    <aura:if isTrue="{!v.matchesSearch}">   
        <tr>{!v.body}</tr>
    </aura:if>
</aura:component>

Is it possible that this issue could somehow be resolved using the components' renderer? Any information on how to begin troubleshooting this issue would be useful.

  • 2
    If you inspect the actual DOM you should see a container element with a class that is the same as your component name. That is what the .THIS is being translated to when your component is being rendered. Do you notice a change in this before and after the rerender? Also try wrapping all the mark-up for your component in a span tag. I have seen some odd behavior when a conditional is the top level in the mark-up. – dsharrison Mar 30 '17 at 16:38
  • Using the span tags to surround the aur:if element appears to work. – salesforce-hacker Mar 30 '17 at 16:54
6

Surrounding the <aura:if></aura:if> element in a <span></span> element resolved the issue, as mentioned in the comment by D.S. . The CSS appears normally on all subsequent renderings.

  • 1
    Good to hear. As an internal best practice we always wrap the body mark-up of our components in <span aura:I'd="view"></span> to avoid rendering bugs and give us a top level container for performing query selectors on. – dsharrison Mar 30 '17 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.