Hiding the title on a lightning card

Question

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?

Answer 1

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');
        }
    },
})