4

I have created a grid which should accept 3 columns of size 1 of 3.

The issue is, if i create only two columns they stretch to occupy full space rather than leaving an empty space for the column not created.

How to i achieve this?

I have already tried adding a dummy column at the end to restrict this behavior but is there a better way to do this via LDS styling class?

Here Goes the code:

<apex:page showHeader="false" standardStylesheets="true" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <apex:stylesheet value="{!URLFOR($Resource.SLDS090,'assets/styles/salesforce-lightning-design-system-vf.css')}"/> </head> <body> <!-- REQUIRED SLDS WRAPPER --> <div class="slds"> <div class="slds-grid "> <div class="slds-col--padded slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " > <div class="slds-form-element is-required"> <label class="slds-form-element__label " for="something"> <abbr class="slds-required" title="required">*</abbr> Bang Bang </label> <div class="slds-form-element__control "> <input id="something" class="slds-input" type="text" maxlength="20" required=""/> </div> </div> </div> <div class="slds-col--padded slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " > <div class="slds-form-element "> <label class="slds-form-element__label " for="hola">hola</label> <div class="slds-form-element__control "> <textarea id="hola" class="slds-textarea" type="text" maxlength="255"/> </div> </div> </div> <!-- <div class="slds-col--padded slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 "> </div> --> </div> </div> </body> </html>

Improve this question

1 Answer 1

Reset to default
1

It's because you've added slds-col--padded class in the grid DOM elements.

According to Salesforce Lightning Design System:

By default, the grid items within a .slds-grid do not stretch to take up that available white-space on the main axis.

Apply .slds-col to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region.

Source: https://www.lightningdesignsystem.com/components/utilities/grid/

So you may remove the slds-col--padded class and add slds-p-left--small and slds-p-right--small classes instead to the div.

So your component code would look like this:

<div class="slds-grid "> <div class="slds-p-left--small slds-p-right--small slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " > <div class="slds-form-element is-required"> <label class="slds-form-element__label " for="something"> <abbr class="slds-required" title="required">*</abbr> Bang Bang </label> <div class="slds-form-element__control "> <input id="something" class="slds-input" type="text" maxlength="20" required=""/> </div> </div> </div> <div class="slds-p-left--small slds-p-right--small slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " > <div class="slds-form-element "> <label class="slds-form-element__label " for="hola">hola</label> <div class="slds-form-element__control "> <textarea id="hola" class="slds-textarea" type="text" maxlength="255"/> </div> </div> </div> </div>
Improve this answer
2
  • 1
    There is no extra "</div>". Commented Aug 17, 2016 at 6:24
  • @JunaidPKhader Oh, my bad! I've removed that section in the answer. Commented Aug 17, 2016 at 6:26

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.