I've been running into an issue where I've got a re-usable component that uses a lightning:card attribute. In the normal course of things, having a title is great; however, in the context of using in another component, it's completely throws off the alignment of the page.

I have tried to dynamically grab the component by both the class (in the render), id, and using the set attribute by itself. None of these have worked.

How can I hide the title section the title section in a controlled way that won't kill this re-usable component in all other contexts?

up vote 0 down vote accepted

I searched quite a bit to see if I could find an answer (or even a question) for this, and was unable to. I figured I'm not the only one with this issue so I decided to share!

I ended up with using a bit of CSS magic and conditional expression in the code. By using a conditional statement to display a certain class, I was able to create an anchor for the CSS to find the child header and modify it only when that class name was present.

<aura:component access="global">
    <aura:attribute access="global" name="tileTitle" type="String" description="The title of the tile" />
    <aura:attribute access="global" name="hideTileTitle"  type="Boolean" default="false" description="Will hide the title if set to true"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <lightning:card class="{!'slds-theme_default '+if(v.hideTileTitle,'hide-title',' ')}" aura-id="card">
        <aura:set attribute="title">
                {!v.tileTitle}
        </aura:set>
        <div class="slds-card__body">
                body text 
        </div>
    </lightning:card>
</aura:component>

Here is the CSS

.THIS.hide-title > header.slds-card__header {
    display: none;
}

Using this method fixed my problem. I hope this will help save someone else some time and skull sweat. I would love to hear from other folks if there's a better way to accomplish this.

Also, if you don't want to use a conditional statement in the component you can always use your JS controller to do the deed.

//Controller
({
    doInit : function(component, event, helper) {
        if (component.get('v.hideTileTitle') === true) {
            $A.util.toggleClass(component.find('card'),'hide-title');
        }
    },
})

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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