[SalesForce] Hiding LWC on a lightning page entirely

I have an LWC that queries data on a record. If no data is actually returned, I want the LWC to not display at all (this is on lightning pages).

I can wrap the contents of the LWC in a <template if:true={condition}></template>. This works for not displaying the contents, but it still renders the component and leaves a little space where the component is on the lightning page due to a margin applied to the wrapper Salesforce wraps the LWC up in.

I don't want this margin there. I want it completely hidden. How can this be achieved? I haven't been able to really find anything to help here, just information on conditional rendering of stuff inside components.

Here is what salesforce wraps LWCs in, the div with flixpageComponent class

Best Answer

It seems like you are using the LWC component in flexi page. Then the flexi page will insert the LWC component DOM in a div as shown in image you shared.

You are getting that margin because of the flexi page div which will all have below CSS:

.flexipageComponent:not(:last-child):not(:empty) {
    margin-bottom: var(--lwc-cardSpacingMargin,0.75rem);
}

It means it will automatically add a margin in the bottom of component if its not the last element vertically.

Note that it actually does not has anything to do with LWC component by itself, this will actually be done for any other custom or standard component also.

The only way of not having the margin is by adding the visibility criteria:

enter image description here

Related Topic