7

When I Google about responsive design, I find many examples where two areas that display side by side:

AAA BBB
AAA BBB
AAA BBB

display one after the other when the screen width is reduced:

AAA
AAA
AAA
BBB
BBB
BBB

But what I'm looking for is how to achieve (in SLDS) what the default detail page layouts in Lightning experience accomplish where individual fields go from neatly aligned two column layout:

F1 F2
F3 F4
F5 F6

to a single column layout with the left/right field ordering preserved:

F1
F2
F3
F4
F5
F6

Is there a simple recipe for this? (I don't see it mentioned in e.g. the SLDS Grid documentation.)

Improve this question
1
  • instead of slds-col for columns, have you try using slds-size_1-of-2 slds-max-small-size_1-of-1
    – Raul
    Nov 24, 2017 at 12:14

2 Answers 2

Reset to default
9

here is a visualforce example:

<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">
<head>
    <apex:slds /> 
    <style>
        .custom-container div {
            border: 1px solid black;
        }
    </style>
</head>
<body class="slds-scope">
    <div class="slds-grid slds-wrap slds-text-align_center custom-container">
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F1</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F2</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F3</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F4</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F5</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F6</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F7</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F8</div>
    </div>
</body>
</apex:page>

Output in big screens:

F1    F2
F3    F4
F5    F6
F7    F8

As we have used slds-max-small-size_1-of-1 sizing, for medium devices it gives output as:

F1
F2
F3
F4
F5
F6
F7
F8

This blog post explains it quite well: Mastering Salesforce Lightning Design System Grids and Lightning Layouts

Improve this answer
4
  • Thanks - got some slight misalignment using lightning:input elements - but works surprisingly well.
    – Keith C
    Nov 24, 2017 at 12:57
  • Think the misalignment is that first lightning:input doesn't have a top margin but subsequent ones do (to provide vertical spacing). But when in two column mode, that pushes the second lightning:input down 8 pixels.
    – Keith C
    Nov 24, 2017 at 13:06
  • Removing slds-form_horizontal got rid of the spurious top margin and slds-form_stacked is less disconcerting in any case for this situation.
    – Keith C
    Nov 24, 2017 at 14:32
  • We are glad to be of any help. Thanks for letting us know about the issue.
    – Raul
    Nov 24, 2017 at 18:45
7

You can use <lightning:layout> or you can use Rahul suggested.

Component:

<aura:component >
    <lightning:layout multipleRows="true">
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6">
            AAA
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6" >
            BBB
        </lightning:layoutItem>
    </lightning:layout  >
        <lightning:layout multipleRows="true">
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6">
            ccc
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6" >
            DDD
        </lightning:layoutItem>
    </lightning:layout>


<div class="slds-grid slds-wrap">
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">AAA</span>
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">BBB</span>
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">CCC</span>
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">DDD</span>
</div>
</aura:component>
Improve this answer
1
  • 1
    Vignesh - thanks for answering too - +1 from me. I accepted Rahul's answer as he posted earliest (at least in the comment).
    – Keith C
    Nov 24, 2017 at 12:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .