5

I'm working in the Lightning Design System and building components that need to have a flexible height. In other words, they should stretch to maximum height available on the page. Here's an example, where the left nav and main containers expand the available height of the page before reaching the footer.

I'm unable to find any specific SLDS classes that provide that kind of feature. Any ideas how this can be done?

enter image description here

4

You can leverage Vertical Stretch. By default, grid items extend vertically unless .slds-wrap is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class .slds-grid--vertical-stretch. Note, to vertically align elements on a cross-axis of a .slds-grid, the elements need available vertical white space. This is usually achieved by having a height applied to the .slds-grid.

<div class="slds-grid slds-grid--vertical-stretch">
  <div>Content determines the width unless otherwise set</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

enter image description here

| improve this answer | |
  • This only seems to work if a parent element has a fixed height. Is it possible to do this so it fills the available space on the screen? – Robs Jul 20 at 22:04
0

I think standard SLDS have better solution for this. try the below code.

<div class="slds-template__container" ></div>
| improve this answer | |

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.