1

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:

enter image description here

Removing "fixed" style eliminates the problem:

enter image description here

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

enter image description here

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

2

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.

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.