6

I have a section in my app where I'm allowing the user to turn on and off various "tiles" of data, which are displayed vertically. I always want them displayed in a certain order, so I use the slds-order--# classes for this.

I just created a 13th tile, and noticed that it (and anything 13 or above) is not shown in the correct order. Does anybody know if this is by design? If so, the SLDS docs mention that the grid system is based on CSS Flexbox. Could I get around an SLDS 12-count max order limit by trying to use "native" CSS flex items and ordering them that way instead of using slds-grid?

Below is a sample app to illustrate what I'm trying to do, where each child component is displayed vertically and I want them displayed in a certain order no matter the order they're created in (I happen to be creating them dynamically in my app, but the sample code just has them created statically).

Thanks!

test_Order_App.app:

<aura:application>
    <ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>

    <div class="companyscopename-slds">
        <div class="slds-grid slds-grid--vertical">
            <c:test_Order_Child orderNum="13"/> <!-- 13 and above appears out of order -->
            <c:test_Order_Child orderNum="12"/> <!-- 1 through 12 appear in order -->
            <c:test_Order_Child orderNum="11"/>
            <c:test_Order_Child orderNum="10"/>
            <c:test_Order_Child orderNum="9"/>
            <c:test_Order_Child orderNum="8"/>
            <c:test_Order_Child orderNum="7"/>
            <c:test_Order_Child orderNum="6"/>
            <c:test_Order_Child orderNum="5"/>
            <c:test_Order_Child orderNum="4"/>
            <c:test_Order_Child orderNum="3"/>
            <c:test_Order_Child orderNum="2"/>
            <c:test_Order_Child orderNum="1"/>
        </div>
    </div>

</aura:application>

test_Order_Child.cmp:

<aura:component>
    <aura:attribute name="orderNum" type="Integer"/>

    <div class="{! 'slds-order--' + v.orderNum + ' slds-medium-order--' + v.orderNum + ' slds-large-order--' + v.orderNum }">
        orderNum = {! v.orderNum }<br/>
    </div>

</aura:component>

Sample output from above:

orderNum = 13
orderNum = 1
orderNum = 2
orderNum = 3
orderNum = 4
orderNum = 5
orderNum = 6
orderNum = 7
orderNum = 8
orderNum = 9
orderNum = 10
orderNum = 11
orderNum = 12
  • 1
    Perhaps you should have posted that edit as an answer instead. – Adrian Larson Feb 16 '17 at 0:15
3

I cut the below from my original post, and made it an answer instead (per Adrian's suggestion). I suppose it's the only alternative, as there seems to be a 12 item limit on using slds-grid's order feature.

I added native flex container and children, and it seems to respect the order number better. Perhaps if using above 12 items, we have to use native flexbox instead of slds-grid?

test_Order_App.app (revised):

<aura:application >
    <ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>

    <div class="companyname-slds">
        slds-grid example:<br/>
        <div class="slds-grid slds-grid--vertical">
            <c:test_Order_Child orderNum="13"/> <!-- 13 and above appears out of order -->
            <c:test_Order_Child orderNum="12"/> <!-- 1 through 12 appear in order -->
            <c:test_Order_Child orderNum="11"/>
            <c:test_Order_Child orderNum="10"/>
            <c:test_Order_Child orderNum="9"/>
            <c:test_Order_Child orderNum="8"/>
            <c:test_Order_Child orderNum="7"/>
            <c:test_Order_Child orderNum="6"/>
            <c:test_Order_Child orderNum="5"/>
            <c:test_Order_Child orderNum="4"/>
            <c:test_Order_Child orderNum="3"/>
            <c:test_Order_Child orderNum="2"/>
            <c:test_Order_Child orderNum="1"/>
        </div><br/><br/>

        flex example:<br/>
        <div class="flexContainer">
            <c:test_Order_FlexChild orderNum="100"/>
            <c:test_Order_FlexChild orderNum="13"/>
            <c:test_Order_FlexChild orderNum="12"/>
            <c:test_Order_FlexChild orderNum="11"/>
            <c:test_Order_FlexChild orderNum="10"/>
            <c:test_Order_FlexChild orderNum="9"/>
            <c:test_Order_FlexChild orderNum="8"/>
            <c:test_Order_FlexChild orderNum="7"/>
            <c:test_Order_FlexChild orderNum="6"/>
            <c:test_Order_FlexChild orderNum="5"/>
            <c:test_Order_FlexChild orderNum="4"/>
            <c:test_Order_FlexChild orderNum="3"/>
            <c:test_Order_FlexChild orderNum="2"/>
            <c:test_Order_FlexChild orderNum="1"/>
        </div>
    </div>

</aura:application>

test_Order_App.css:

.THIS .flexContainer{
    display: flex;
    flex-direction: column;
}

test_Order_FlexChild.cmp:

<aura:component >
    <aura:attribute name="orderNum" type="Integer"/>

    <div style="{! 'order: ' + v.orderNum + ';'}">
        orderNum = {! v.orderNum }<br/>
    </div>

</aura:component>

Sample output (revised):

slds-grid example:
orderNum = 13
orderNum = 1
orderNum = 2
orderNum = 3
orderNum = 4
orderNum = 5
orderNum = 6
orderNum = 7
orderNum = 8
orderNum = 9
orderNum = 10
orderNum = 11
orderNum = 12


flex example:
orderNum = 1
orderNum = 2
orderNum = 3
orderNum = 4
orderNum = 5
orderNum = 6
orderNum = 7
orderNum = 8
orderNum = 9
orderNum = 10
orderNum = 11
orderNum = 12
orderNum = 13
orderNum = 100

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.