0

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>
         <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>

1 Answer 1

1

Since you are using SLDS you should be able to use lightning:layout for your columns.

Try to place your checkboxes like this:

<lightning:layout multipleRows="true">
    <lightning:layoutItem size="6" padding="around-small">
         //put your left column fieldset in here
    </lightning:layoutItem>

    <lightning:layoutItem size="6" padding="around-small">
         //put your right column fieldset in here
    </lightning:layoutItem>
</lightning:layout>

You must log in to answer this question.

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