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
Jack A 2Jack A 2 

How can I adjust the content in Lightning Modal?

I am trying to adjust the content in two columns but not able to do, I want them in two column with a bit of space b/w them.
  
<aura:component implements="force:lightningQuickActionWithoutHeader" >
   <div class="slds-modal__header">
     <h2 id="header43" class="slds-text-heading--medium">Print Chart</h2>
   </div>
   <!--If you want to customise header then use 'implements ="force:lightningQuickActionWithoutHeader"' -->
   <!--/**

   **/-->
   <span> Select Information to print</span><br></br>
   <span>Select:</span>

    <ui:button label="All" />
    <ui:button label="None" />

    <fieldset class="slds-form--compound">
    <div class="slds-form-element">
       <div class="slds-form-element slds-size--1-of-2">   
           <span class="slds-checkbox">
           <input type="checkbox" name="options" id="checkbox-195" checked="" />             <label class="slds-checkbox__label" for="checkbox-195">
             <span class="slds-checkbox--faux"></span>
             <span class="slds-form-element__label">Patient </span>
           </label>
           </span>
           <span class="slds-checkbox">
             <input type="checkbox" name="options" id="checkbox-194" checked="" />
             <label class="slds-checkbox__label" for="checkbox-194">
             <span class="slds-checkbox--faux"></span>
             <span class="slds-form-element__label">Patient</span>
             </label>
           </span>
       </div>
     </div>
  </fieldset>
     <div class="slds-form-element">

          <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-193" checked="" />
            <label class="slds-checkbox__label" for="checkbox-193">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Flowsheet</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-192" checked="" />
            <label class="slds-checkbox__label" for="checkbox-192">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label"> selected</span>
            </label>
            </span>
          </div>

         <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-191" checked="" />
            <label class="slds-checkbox__label" for="checkbox-191">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Checkbox Label</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-190" checked="" />
            <label class="slds-checkbox__label" for="checkbox-190">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Checkbox Label</span>
            </label>
            </span>
         </div>

         <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-180" checked="" />
            <label class="slds-checkbox__label" for="checkbox-180">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Di</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-181" checked="" />
            <label class="slds-checkbox__label" for="checkbox-181">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Al</span>
            </label>
            </span>
         </div>

         <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-182" checked="" />
            <label class="slds-checkbox__label" for="checkbox-182">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Medi</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-183" checked="" />
            <label class="slds-checkbox__label" for="checkbox-183">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label"> availavle</span>
            </label>
            </span>
         </div>

        <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-184" checked="" />
            <label class="slds-checkbox__label" for="checkbox-184">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Imm</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-185" checked="" />
            <label class="slds-checkbox__label" for="checkbox-185">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Social history</span>
            </label>
            </span>
         </div>

        <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-186" checked="" />
            <label class="slds-checkbox__label" for="checkbox-186">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Past history</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-187" checked="" />
            <label class="slds-checkbox__label" for="checkbox-187">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">history</span>
            </label>
            </span>
         </div>

       <div class="slds-grid slds-wrap">  
            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-188" checked="" />
            <label class="slds-checkbox__label" for="checkbox-188">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Advance directives</span>
            </label>
            </span>

            <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-189" checked="" />
            <label class="slds-checkbox__label" for="checkbox-189">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">No notes selected</span>
            </label>
            </span>
       </div>

    </div>
         <div class="slds-modal__footer">
          <button class="slds-button slds-button--neutral">Cancel</button>
          <button class="slds-button slds-button--brand">Save</button>
        </div>

    </aura:component>

User-added image
Roshni RahulRoshni Rahul
Hi Jack,

Its better if you include table with two column using html and then include these details.
Muzammil BajariaMuzammil Bajaria
Hi jack,

You can use slds-grid and slds-col
Refer to this link for more details : 

https://www.lightningdesignsystem.com/components/utilities/grid/
 
Roshni RahulRoshni Rahul
Hi Jack,

Just try this code
  
<aura:component implements="force:lightningQuickActionWithoutHeader" >
   <div class="slds-modal__header">
     <h2 id="header43" class="slds-text-heading--medium">Print Chart</h2>
   </div>
   <!--If you want to customise header then use 'implements ="force:lightningQuickActionWithoutHeader"' -->
   <!--/**

   **/-->
   <span> Select Information to print</span><br></br>
   <span>Select:</span>

    <ui:button label="All" />
    <ui:button label="None" />

    <fieldset class="slds-form--compound">
    <div class="slds-form-element">
       <div class="slds-form-element slds-size--1-of-2">   
           <span class="slds-checkbox">
           <input type="checkbox" name="options" id="checkbox-195" checked="" />             <label class="slds-checkbox__label" for="checkbox-195">
             <span class="slds-checkbox--faux"></span>
             <span class="slds-form-element__label">Patient </span>
           </label>
           </span>
           <span class="slds-checkbox">
             <input type="checkbox" name="options" id="checkbox-194" checked="" />
             <label class="slds-checkbox__label" for="checkbox-194">
             <span class="slds-checkbox--faux"></span>
             <span class="slds-form-element__label">Patient</span>
             </label>
           </span>
       </div>
     </div>
  </fieldset>

    <table class="slds-form-element">
          <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-193" checked="" />
            <label class="slds-checkbox__label" for="checkbox-193">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Flowsheet</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-192" checked="" />
            <label class="slds-checkbox__label" for="checkbox-192">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label"> selected</span>
            </label>
            </td>
          </tr>

         <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-191" checked="" />
            <label class="slds-checkbox__label" for="checkbox-191">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Checkbox Label</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-190" checked="" />
            <label class="slds-checkbox__label" for="checkbox-190">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Checkbox Label</span>
            </label>
            </td>
         </tr>

         <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-180" checked="" />
            <label class="slds-checkbox__label" for="checkbox-180">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Di</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-181" checked="" />
            <label class="slds-checkbox__label" for="checkbox-181">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Al</span>
            </label>
            </td>
         </tr>

         <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-182" checked="" />
            <label class="slds-checkbox__label" for="checkbox-182">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Medi</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-183" checked="" />
            <label class="slds-checkbox__label" for="checkbox-183">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label"> availavle</span>
            </label>
            </td>
         </tr>

        <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-184" checked="" />
            <label class="slds-checkbox__label" for="checkbox-184">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Imm</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-185" checked="" />
            <label class="slds-checkbox__label" for="checkbox-185">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Social history</span>
            </label>
            </td>
         </tr>

        <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-186" checked="" />
            <label class="slds-checkbox__label" for="checkbox-186">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Past history</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-187" checked="" />
            <label class="slds-checkbox__label" for="checkbox-187">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">history</span>
            </label>
            </td>
         </tr>

       <tr class="slds-grid slds-wrap">  
            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-188" checked="" />
            <label class="slds-checkbox__label" for="checkbox-188">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Advance directives</span>
            </label>
            </td>

            <td class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-189" checked="" />
            <label class="slds-checkbox__label" for="checkbox-189">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">No notes selected</span>
            </label>
            </td>
       </tr>

    </table>
         <div class="slds-modal__footer">
          <button class="slds-button slds-button--neutral">Cancel</button>
          <button class="slds-button slds-button--brand">Save</button>
        </div>

  
</aura:component>

 
Roshni RahulRoshni Rahul
If you dont want to use the table, you can also add space  by setting the width of div.