1

I have my html set up like:

            <div class="slds-container--center slds-container--medium" id="userSettingsTable">
                <ul class="outline slds-box--border">
                    <li id="dragDropRow">
                        <div class="slds-size--2-of-4 slds-text-align--left slds-p-around--medium">
                            <label class="slds-form-element__label" for="allowDragDrop" style="color: black; font-size: 12px; margin-left: 5px;">Allow Drag And Drop Functionality In Scheduler:</label>
                            <span class="k-icon k-i-question user-settings" title="Enabling this option will allow you to drag and drop event blocks on the scheduler to new times for quick editing. This will also let you use ctrl+click and drag to quickly clone events. Unchecking this option will prevent you from moving event blocks with click and drag completely."></span>
                        </div>
                        <div class="slds-size--2-of-4 slds-text-align--right slds-p-around--medium"> 
                            <label class="slds-checkbox_toggle slds-grid">
                                <input type="checkbox" class="auto-save-toggle" api-name="orcs__Allow_Drag_And_Drop__c" name="allowDragDrop" id="allowDragDrop" aria-describedby="toggle-desc" />
                                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                                    <span class="slds-checkbox_faux" style="height: 18px;"></span>
                                    <span class="slds-checkbox_on" style="text-align:center;">Enabled</span>
                                    <span class="slds-checkbox_off" style="text-align:center;">Disabled</span>
                                </span>
                            </label>
                        </div>
                    </li>
                </ul>
            </div>

But the divs inside the li element are each on their own line. My understanding with the slds-size--x-of-x was that they would be in one row if they added up to '1' (2-of-4 and 2-of-4 = 1/4 * 2 + 1/4 * 2 = 1).

This kind of styling is taken from the /ui/setup/lightning/Enable in a Salesforce org. I am attempting to replicate the style of table they have set up for the options in each tab.

How do you get each div inside the li elements to be on the same line with the slds-size?

3
  • 1
    As an aside, please make sure you update your classes. The -- notation has been deprecated in favor of _. By way of example, slds-size_1-of-2 instead of slds-size--1-of-2.
    – sfdcfox
    Dec 13 '17 at 16:01
  • Ah, thank you. I just googled slds size/grid stuff and used the lightning design system documentation I found. But looking at the url, it does say archived, so it must be outdated. Dec 13 '17 at 16:05
  • Yes, the current sizing classes are here: lightningdesignsystem.com/utilities/sizing. The www url refers to the current release.
    – sfdcfox
    Dec 13 '17 at 16:07
1

Add another div just before your which contains your li elements. This div contains the class slds-form-element__row which will get you both the elements on same line.

<div class="slds-container--center slds-container--medium" id="userSettingsTable">
            <ul class="outline slds-box--border">
                <li id="dragDropRow">
                  <div class="slds-grid">
                    <div class="slds-size--2-of-4 slds-text-align--left slds-p-around--medium">
                        <label class="slds-form-element__label" for="allowDragDrop" style="color: black; font-size: 12px; margin-left: 5px;">Allow Drag And Drop Functionality In Scheduler:</label>
                        <span class="k-icon k-i-question user-settings" title="Enabling this option will allow you to drag and drop event blocks on the scheduler to new times for quick editing. This will also let you use ctrl+click and drag to quickly clone events. Unchecking this option will prevent you from moving event blocks with click and drag completely."></span>
                    </div>
                    <div class="slds-size--2-of-4 slds-text-align--right slds-p-around--medium"> 
                        <label class="slds-checkbox_toggle slds-grid">
                            <input type="checkbox" class="auto-save-toggle" api-name="orcs__Allow_Drag_And_Drop__c" name="allowDragDrop" id="allowDragDrop" aria-describedby="toggle-desc" />
                            <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                                <span class="slds-checkbox_faux" style="height: 18px;"></span>
                                <span class="slds-checkbox_on" style="text-align:center;">Enabled</span>
                                <span class="slds-checkbox_off" style="text-align:center;">Disabled</span>
                            </span>
                        </label>
                    </div>
                  </div>
                </li>
            </ul>
        </div>
4
  • Hmm, that is not seeming to work. It still puts it on two lines, when it sets the width to 50% for both divs. Dec 13 '17 at 16:16
  • Could you try the latest changes.
    – SFExplorer
    Dec 14 '17 at 2:41
  • Yes! That puts them both on the same line as desired. So it was just wrapping it in a div with class slds-grid instead of slds-form-element__row? Dec 14 '17 at 15:46
  • Yes, slds-form-element__row needs a compound form to create rows of form.
    – SFExplorer
    Dec 15 '17 at 2:50

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.