0

I am writing an Aura Component that only needs to render in certain situations. This can't be done with Component Filtering as it requires some pretty complex background logic. I am achieving this functionality by wrapping my card in an aura:if tag. Here is an example that will create the problem.

<aura:component implements="force:appHostable,flexipage:availableForRecordHome">  
    <aura:if isTrue="{!false}">
        <article class="slds-card">
            <div class="slds-card__body slds-card__body_inner">
                <!--Card Body goes here -->
                Test component
            </div>            
        </article>
    </aura:if>
</aura:component>

It's worth noting that in the actual component, there is more logic, it's not just isTrue={!false}.

If you put that component on a layout, it leaves a gap. The sidebar components are now slightly below the main detail section, even though they normally line up.

There is a small 10px gap where the component should be.

Is there a way to remove this gap?

1 Answer 1

2

The margin (bottom) is added by lightning flexi-page. You can use the aura:html to inject CSS if you want to remove it but it can break in certain scenarios.

  1. Any release where the base component name is changed. Currently it is flexipage-component2.
  2. If SF tries to enforce CSS encapsulation/namespacing to CSS generated in aura:html tag.
  3. The CSS would impact all the component instances of same component. You can definitely add conditional logic to prevent that.

Do change the TestComp with the name of your component in line 3


<aura:component implements="force:appHostable,flexipage:availableForRecordHome"> 
    <aura:html tag="style">
        flexipage-component2[data-component-id="TestComp"] { // CHANGE THE COMPONENT ID HERE WIHT YOUR COMPONENT NAME
            margin-bottom: 0 !important;
        }
    </aura:html>
    <aura:if isTrue="{!false}">
        <article class="slds-card">
            <div class="slds-card__body slds-card__body_inner">
                <!--Card Body goes here -->
                Test component
            </div>            
        </article>
    </aura:if>
</aura:component>

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.