-2

How to Create side by side table using grid <
Appointment Scheduler

To schedule an appointment with a HR Appointment Scheduler Associate, please enter the details below. Once confirmed, an associate will call you during your scheduled appointment time. • This application is to be used to schedule a 30 minute appointment with a GHRS customer service representative. </div>-->
{!'Appointment ' + v.action}
-->

  <table class="slds-table slds-grid slds-grid_vertical-align-start slds-gutters slds-box">
     <thead>
                <div class="slds-grid"><div class="slds-size_2-of-30"></div>
                 <div class="slds-size_2-of-30">    
                 <div class="slds-col">
                 <p class="subheading mobile-subhead">Purpose</p></div>
                  <div class="slds-size_2-of-30"></div></div>
                  <tr class="slds-text-title_caps">
                 <th scope="col" class="slds-cell-wrap">
             </th>
            </tr>
             </div>
       </thead>    
    <tbody>
              <tr class="mobile-view-tr1">
    <ui:inputRadio aura:id="Oppty" label="" name="Role" value="{!v.bookingDetails.Opportunity__c}" />Issue With &nbsp;&nbsp;
    <ui:inputRadio aura:id="Case" label="" name="Role" value="{!!v.bookingDetails.Case__c}"/>Intersted in
     </tr>

        <div class="heading"><label class="mobile-view-tr1">{!$Label.c.Appointment_Scheduler_Reason}</label></div>             
                       <td class="required-field mobile-view-tr1" >
        <span class="mobile-view-star" style="color:red; ">*</span><ui:inputSelect aura:id="reason" label="" value="{!v.bookingDetails.Reason__c}" required="true"/>
    </td>   



</tbody>
    </table>   
        <table class="slds-table slds-grid_vertical-align-start slds-table_bordered slds-box ">
        <thead>
                <div class="slds-grid"><div class="slds-size_2-of-30"></div>
                 <div class="slds-size_2-of-30">    
                 <div class="slds-col">
                 <p class="subheading mobile-subhead">Personla Information </p></div>
                  <div class="slds-size_2-of-30"></div></div>
                  <tr class="slds-text-title_caps">
                 <th scope="col" class="slds-cell-wrap">
             </th>
        </tr>
  </div>
</thead>     
        <tr class="mobile-view-tr1">
            <td style="" class="heading mobile-view-preferredname"><label>{!$Label.c.Appointment_Scheduler_Name} </label></td>
            <!--<td  class="mobile-view-td2" >-->
            <td class="required-field">
                <span style="color:red; ">*</span> <ui:inputText class="inputContact-fields" aura:id="name" label="" value="{!v.bookingDetails.Appointment_Scheduler_Name__c}" required="true"  />
            </td>
        </tr>
            <tr>
            <td  class="heading mobile-view-email"><label class="mobile-view-email">{!$Label.c.Appointment_Scheduler_Email}</label></td>
            <td class="required-field mobile-view-email"><span style="color:red; ">*</span><ui:inputEmail  class="inputContact-fields" aura:id="email" label="" value="{!v.bookingDetails.email}" required="true" />
            </td>
            </tr>
        <tr>
            <td class="heading mobile-view-phone"><label>{!$Label.c.Appointment_Scheduler_Phone}</label></td>
            <td class="required-field mobile-view-phone"><span style="color:red; ">*</span><ui:inputPhone aura:id="phone" class="inputContact-fields" label="" value="{!v.bookingDetails.Appointment_Scheduler_Phone__c}"  required="true"/>
            </td>
        </tr>

 </table>
            <tr  class="mobile-view-bottom" >
            <td colspan="2"><center style="">
            <lightning:button label="{!$Label.c.Appointment_Scheduler_Next}" onclick="{!c.goNext}" class="nxt-butn slds-button slds-button_neutral commandButton" />
            </center></td>   
        </tr>
         </table>
            </form>
                </aura:component>
1

Use lightning:layout like so:

    <lightning:layout multipleRows="false">
                <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="6" padding="around-small">
                    <!-- TABLE 1 HERE -->
                </lightning:layoutItem>
                <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="6" padding="around-small">
                    <!-- TABLE 2 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.