0

Trying to use the grid system to do something similar to the following:

=================================HEADER ROW Size 1 of 1=========================== + + + + + + + + + + + + + + + + + + + + + 3 of 12 + + 9 of 12 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ==============================BOTTOM OF PAGE WITHOUT SCROLL=======================

I can almost get there are a few issues

  1. the frame does not take into account the first row and thus the page extends below the VH of the page
  2. The columns either don't wrap or center on the page depending on what I do

an example of what I am trying

<div class="slds-grid slds-grid_frame slds-grid_vertical-stretch slds-wrap">
    <div class="slds-size_1-of-1">
          ...HEADER STUFF
     </div>

     <div class="slds-size_1-of-1 slds-grid slds-grid_vertical-stretch slds-wrap" >
          <div class="slds-size_3-of-12 slds-border--right">
                   ....LEFT SIDE
          </div>
          <div class="slds-size_9-of-12 slds-border--right">
                   ....RIGHT SIDE
          </div>

     </div>

</div>

Which is almost right except the header row takes up a lot more space than it should. It should be normal height and not half the page

enter image description here

If I add slds-grid_vertical to the main div the bottom section comes up but does not stretch the remaining page height

enter image description here

  • are you hosting this as an Apex Page or a lightning component? – Ronnie Sep 19 '18 at 2:02
  • Both. Would be happy if either worked – Eric Sep 19 '18 at 2:37
0

Try with below code can help you.

<aura:application extends="force:slds">   
    <div class=" slds-grid slds-wrap slds-grid--pull-padded">
        <div class=" Myheader slds-p-horizontal--small slds-size--12-of-12">header</div>
        <div class=" MyLeftSide group slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--3-of-12 slds-large-size--3-of-12">left Side   
        </div>
        <div class="MyRightSide group slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--3-of-12 slds-large-size--9-of-12">right Side
        </div>
    </div>
</aura:application>

Apply your own style class to grid system for height and width.

Style :

.THIS .Myheader {
    background-color:Blue;
    height :50px;
}

.THIS .MyLeftSide {
    background-color: Green;
    height :600px;
}

.THIS .MyRightSide {
    background-color: Silver;
    height :700px;
}
  • Nope, does not extend the height of the page for the left and right part below the header – Eric Aug 11 '17 at 5:11
  • The height of the the grid based on the content that cover inside left and right side . – NITHESH K Aug 11 '17 at 5:21
  • Thank for the effort but the container extends the full width of the page without any content when the appropriate classes are applied – Eric Aug 11 '17 at 5:25
0

I would try like this:

<aura:component description="TestGridLayoutComponent">

<lightning:layout>
    <lightning:layoutItem size="12">

        <lightning:layoutItem size="12" class="MyTopContainer" >
            <h2><b>Top Content</b></h2>
        </lightning:layoutItem>

        <lightning:layout class="page">
            <lightning:layoutItem size="3" class="OtherContainer" >
                <p><b>Left Side</b></p>
            </lightning:layoutItem>

            <lightning:layoutItem size="9" class="OtherContainer" >
                <p><b>Right side</b></p>
            </lightning:layoutItem>
        </lightning:layout>

    </lightning:layoutItem>

</lightning:layout>
</aura:component>

Style:

.THIS .MyTopContainer{
    border: 1px solid #cccccc;
    text-align: center;
    width: 100%;
}

.THIS .OtherContainer {
    border: 1px solid #cccccc;
    padding: 10px;
}

Your result would looks like this. Lightning:layout uses slds-grid to control the layout - you can add additional styles to fit the size constraints for your page height

Your result

In Apex:

<apex:page id="TestPage2">
    <apex:includeLightning />
    <apex:slds />

    <style>
        .TopContainer {
            border: 1px solid #cccccc;
        }

        .OtherContainer {
            border: 1px solid #cccccc;
        }
    </style>
    <div class="slds">
        <div class="slds-grid slds-grid--vertical">
            <div class="slds-size_12-of-12">

                <div class="slds-size_12-of-12 slds-text-align--center TopContainer">
                    <h2><b>Top Content</b></h2>
                </div>
                <div class="slds-grid">
                    <div class="slds-size_3-of-12 slds-p-around--small OtherContainer">
                        <p><b>Left Content</b></p>
                    </div>
                    <div class="slds-size_9-of-12  slds-p-around--small OtherContainer">
                        <p><b>Right Content</b></p>
                    </div>

                </div>

            </div>

        </div>
    </div>

</apex:page>

Your Result:

Similar Result

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.