6

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

Improve this question
6
  • If you can store related records count in a field on your object then you can use set component visibility option from app builder. help.salesforce.com/…
    – amitghadage
    Dec 13, 2019 at 15:00
  • Can you show related code, i think u r adding some styling from parent comp itself. LWC does not add any styling by itself
    – salesforce-sas
    Dec 13, 2019 at 15:01
  • Is that the only way? We can't add fields for related record counts on every object.
    – Tyler Dahle
    Dec 13, 2019 at 15:02
  • @salesforce-sas There isn't code to show. I added the image of what Salesforce adds to the page to wrap your component. my-component is the parent component, I didn't add the div around it, Salesforce wrapped that up. And it is that div wrapper that has the margin.
    – Tyler Dahle
    Dec 13, 2019 at 15:06
  • you can conditionally add a display:none css rule if your condition is 0 results.
    – glls
    Dec 13, 2019 at 15:33

1 Answer 1

Reset to default
1

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

Improve this answer
2
  • 2
    My case is actually an object that looks up to the record, it isn't a drill up from the record itself. Sorry, I think I made it seem like a normal related list. So we cannot reach that object from the visibility settings on the lightning page. Is there actually no other solution that to live with an awkward margin randomly in the page? It seems like normal aura components do not have this when their contents are rendered conditionally.
    – Tyler Dahle
    Dec 13, 2019 at 20:05
  • I have the same problem. Anyone find a way to adjust the bottom margin of the LWC based on logic within the LWC? My logic is based on child records, so using the filter of the LWC to control component visibility does not work.
    – Mike Paisner
    Jan 26, 2021 at 0:35

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.