function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Test User 501Test User 501 

Lightning Design System Grid Problem

Hi guys,

I'm just starting to use the Lightning Design System and I dont really understand the behaviour of the grid system.
  
<div class="slds-grid slds-wrap">
   <aura:iteration items="{!v.fieldsFromObject}" var="field">
        <div class="slds-col--padded slds-size--1-of-1 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">
                        TEST
        </div>
    </aura:iteration>
</div>
And thats the result: 

the resulting grid
As you can see, the last content has 100% width ... my understanding is that it should be 33.33% just like the other cols.

Am I missing something here?

Cheers
Best Answer chosen by Test User 501
Tavva Sai KrishnaTavva Sai Krishna
Hi User,

You can add padding/margin for the inputfields. You can refer this link for more information about these.
http://www.lightningdesignsystem.com/components/utilities/spacing/

Let me know if you need any thing else.

Thanks and Regards,
Sai Krishna Tavva.

All Answers

Tavva Sai KrishnaTavva Sai Krishna
Hi User,

Can you post the full code to debug it . 

Thanks and Regards,
Sai Krishna Tavva.
Test User 501Test User 501
Here's a simpler example but with the same result:
  
<ltng:require styles="/resource/SLDS102/assets/styles/salesforce-lightning-design-system.min.css"/>
    
    <div class="slds-grid slds-wrap">            
        <div style="background-color:red" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
        <div style="background-color:blue" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
        <div style="background-color:yellow" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
        <div style="background-color:green" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
        <div style="background-color:black" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
    </div>

Result:

User-added image
Amit VaidyaAmit Vaidya
Hi,

Below will work for you, you will get an idea from it what to do in the .css file of the component. There is not anything that you are missing. It is just an css issue.
  
<aura:component >
	<ltng:require styles="/resource/slds080/assets/styles/salesforce-lightning-design-system.min.css"/>
    <style>
		#f, #s, #t, #fr, #fv {
			display: block;
			float: left;    
			width: 20%;    
			height: 50px;
		}
	</style>
    <div style="slds">
    	<div class="slds-grid slds-wrap">            
			<div id="f" style="background-color:red" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
			<div id="s" style="background-color:blue" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
			<div id="t" style="background-color:yellow" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
			<div id="fr" style="background-color:green" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
			<div id="fv" style="background-color:black" class="slds-col--padded slds-size--1-of-2 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">A</div>
    	</div>
    </div>
</aura:component>

Thanks,
Amit
Tavva Sai KrishnaTavva Sai Krishna
Hi User,

For me it is rendering Exactly how it should work. see below screenshots.Code
Result:
Result
If you Observe the highlighted line in the code  the div ( Black color) is the fifth Component line before that 4 (red,blue,Yellow,Green) are present. But you have applied the slds-large-size--3-of-12 which means each block should take 33.33% of width in large screen. the remaining columns will shift to second row automatically and adjust width such that to fit the entire row in a equal spacing (As you are using slds-col-padded).  

if you want to occupy the black color div width 33.33% then you have to remove the class slds-col-padded.  As below.Modified Code.

Result:
Updated Result.

try with adding or removing Extra div's to understand more. Also changing the size of the div tags.

Let me know if you have any quieries.

Also please mark this as best answer if this answers to your question .

Thanks and Regards,
Sai Krishna Tavva.
 
Test User 501Test User 501
Ok Sai's solution works so far, but I actually have input fields in the cols and these are right next to each other now because theres no padding. Any solution here with standard classes?

Thanks!
Tavva Sai KrishnaTavva Sai Krishna
Hi User,

You can add padding/margin for the inputfields. You can refer this link for more information about these.
http://www.lightningdesignsystem.com/components/utilities/spacing/

Let me know if you need any thing else.

Thanks and Regards,
Sai Krishna Tavva.
This was selected as the best answer
Tavva Sai KrishnaTavva Sai Krishna
Hi User,

Please Mark the solution as best answer if it answers to your question as it may useful to others.

Thanks and Regards,
Sai Krishna Tavva.
Test User 501Test User 501
OK this works.
Thank you very much!