2

I'm creating a custom theme layout. I am stuck on getting a basic layout created.

Here's how I want the layout to appear:

Row 1: Logo (align left), Profile (align right) Row 2: Menu Row 3: Body Contents

Wrapping all rows, I want a centered, large container, so the webpage max width is 1024px, but it is centered on the screen.

So to created Row 1, I came up with something like this:

<div class="slds-grid slds-grid--align-center">
    <div class="slds-container--large">
        <div class="slds-grid">
            <div class="slds-col">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">Insert Logo Here</div>
            </div>
            <div class="slds-col">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">Insert Profile Here</div>
            </div>
        </div>    
    </div> 
</div>

Text is centered, but the columns do not stretch. They take up just enough space to display the text.

If I take the inner grid and display that, they stretch just fine:

<div class="slds-grid">
    <div class="slds-col">
        <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">Insert Logo Here</div>
    </div>
    <div class="slds-col">
        <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">Insert Profile Here</div>
    </div>
</div>  

But if this snippet is inside a container, it stops stretching.

I tried dozens of alterations, including using a fluid container inside the large container, using width=100%, but nothing has given the desired effect.

How can I force the grid/cols to stretch to fill its container?

1

Well, I somewhat achieved the desired result via what I would consider a hack. The cols don't stretch, but at least they are now using the full space available:

<div class="slds-grid slds-grid--align-center" style="background-color: grey;">
    <div class="slds-container--large" style="width: 100%; background-color: green;">
        <div class="slds-container--fluid" style="width: 100%; background-color: orange;" >
            <div class="slds-grid">                    
                <div class="slds-col">
                    <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">Logo</div>
                </div>
                <div class="slds-col slds-col--bump-left">
                    <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">Profile</div>
                </div>                    
            </div>                 
        </div>
    </div> 
</div>

I don't know why I would have to specify width=100% on a slds-container--fluid but if I don't, it won't fill the space. Same is true with slds-container--large. Take out either one of the width=100% and the hack doesn't work.

Hopefully someone knows how to make this work properly. Until then, I have to live in shame.

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.