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>

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.