slds-col--padded breaks grid system

[bkilshaw]

The documentation states:

To apply gutters between each grid item, the following classes are available to add your intended gutters, .slds-col--padded, .slds-col--padded-medium and .slds-col--padded-large.

However, applying this class to a column that's also utilizing the grid system causes the grid size to be ignored. Example: https://jsfiddle.net/bngc6763/3/

This is caused by the following rule:

.slds-col, [class*=slds-col--padded] {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

[brandonferrua]

Thanks for bringing this to our attention. The documentation is not ideal at the moment but due to the nature of flexbox, the class is telling it "grow" to consume the available white space. To have it not do that, add the class .slds-grow-none to the element with the sizing class on it. It will then respect that width.

[bkilshaw]

But why is it only being applied by slds-col--padded? It appears the purpose of that class is to simply add padding to the block, not changing it's flex properties. If you unset the flex property, the padding is still applied and the box doesn't grow. Example:

https://jsfiddle.net/bngc6763/4/

[brandonferrua]

We'll look into clearing up this confusion. Thanks again for reporting!

[bkilshaw]

Sorry, just a bit confused. Is this the intended functionality? Why would slds-col--padded need to do anything besides add padding inside the element?

[brandonferrua]

It is the intended functionality. Its a modification of slds-col with the styles of slds-col. If you don't require the intended flexbox functionality, you can remove slds-col--padded and use the spacing helpers instead.

<div class="slds-grid">
  <div class="slds-size--4-of-6 slds-p-horizontal--small">...</div>
</div>

[bkilshaw]

Alright, well if it's the intended functionality then updating the docs would be sufficient. However, as a user it seems far from intuitive as the class is doing more than it's name implies.

[kaelig]

Closing this as slds-col--padded is deprecated.