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>

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>
  • 1
    There is no extra "</div>". – Junaid P Khader Aug 17 '16 at 6:24
  • @JunaidPKhader Oh, my bad! I've removed that section in the answer. – SE_User Aug 17 '16 at 6:26

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.