Why adding "position:fixed" and "width:100%" styles to lightning:card element fixes right margin?

Question

Let's consider a simple component:

<aura:component implements="force:appHostable">
    <lightning:card class="test" iconName="custom:custom62" title="Test Card">
        <aura:set attribute="actions">
            <lightning:button label="Button"/>
        </aura:set>
    </lightning:card>
</aura:component>

With a CSS style:

.THIS.test {
    position: fixed;
    width: 100%;
}

If you put it inside a Tab, this is what you're receiving:

Removing "fixed" style eliminates the problem:

I tried to modify "margin" - every side gets a new margin except the right one:

"margin-right" doesn't work at all.

Answer 1

When you use anything other than "static" positioning mode, such as "fixed", the width is no longer constrained to the parent's bounding box. What's happening here is that you're creating a DOM element that exceeds the width of the page, and by default, we don't get scroll bars. For example, when you set "width: 100%; margin: 2em", in absolute, fixed, and relative modes, you're asking for an element "100% of the parent element's width plus an addition 4em (2 on each side)".

There's a bit of a monkey wrench in here, though. Because of SLDS, there's a style called slds-brand-band that you have to beat. In other words, you need a higher specificity. To get that, use an id attribute, not a class style. Also, make sure that you use an outer wrapper element to get the desired width:

<div id="fixed">
    <lightning:layout>
        <lightning:layoutItem size="12" padding="around-large">
            <lightning:card iconName="custom:custom62" title="Test Card">
                <aura:set attribute="actions">
                    <lightning:button label="Button"/>
                </aura:set>
            </lightning:card>
        </lightning:layoutItem>
    </lightning:layout>
</div>

---

// May need to be .THIS #fixed, depending on location of element
.THIS#fixed {
    position: fixed;
    width: 100%;
}

In this case, the wrapper is set to 100%, and the card is neatly contained inside it, fixed at a point on the screen when you scroll. The direct styles are necessary because the slds-brand-band, which casts a large web of influence over your components in the Lightning Experience, forces position: relative onto everything.