1

<aura:attribute Name="account" type="Account"  access="public" />
<aura:attribute Name="accountId" type="String"  access="public" default="{!v.recordId}"/>
<aura:attribute Name="accountName" type="String"  access="public" />
<aura:attribute Name="accountStartDate" type="Date"  access="public" />
<aura:attribute Name="accountEndDate" type="Date"  access="public" />
<aura:attribute Name="accountRequest" type="Account_Request__c"  access="public" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-modal__content slds-p-top--x-large slds-p-around--medium" aura:id="modalbody" id="modalbody">
<div class="modal-header slds-modal__header">
        Create New Account Request
</div>
<div class="Account Details">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                </thead>
                <tbody>
                    <tr scope = "row">                            
                        <th>
                            <lightning:input aura:id="accountToUpdate" value="{!v.accountRequest.Name}"/>  
                        </th>
                    </tr>
                    <br/>
                    <tr>
                        <th scope = "col">
                            <ui:inputText aura:id="accountStartDate" value="{!v.accountRequest.SEG_SCH_ID__c}" label="UCN"/>  
                        </th>
                    </tr>
                    <br/>
                    <tr>
                        <th scope = "col">
                            <ui:inputDate aura:id="accountStartDate" value="{!v.accountRequest.SEG_START_DATE__c}" label="Start Date" displayDatePicker="true" format="MM/dd/yyyy"/>  
                        </th>
                        <th scope = "col">
                            <ui:inputDate aura:id="accountEndDate" value="{!v.accountRequest.SEG_END_DATE__c}" label="End Date" displayDatePicker="true" format="MM/dd/yyyy"/>  
                        </th>
                    </tr>
                    <br/>
                </tbody>
        </table>              
</div>
<div class="slds-modal__footer">
    <div class="forceChangeRecordTypeFooter">
        <button type="button" class="slds-button slds-button--neutral .slds-modal__close" aura:id="btnCancel" >
            Cancel
        </button>
        <button type="button" class="slds-button slds-button--brand" aura:id="btnSave" onclick="{!c.createAccountRequest}">
            Save
        </button>
    </div>
</div>
</div>

5
  • not sure i understand what you mean by "outside of the component" could you share a screenshot of what you are trying to achieve?
    – glls
    Mar 18, 2018 at 16:40
  • What I meant was. The footer should be attached to the component, but somehow here there is a gap in between
    – Rimii
    Mar 18, 2018 at 16:45
  • ahh, i see =P . thx for clarifying
    – glls
    Mar 18, 2018 at 16:47
  • @Rimii can you share complete code of component? Mar 18, 2018 at 17:25
  • Added the enire component code @ManjotSingh
    – Rimii
    Mar 18, 2018 at 18:12

1 Answer 1

2

Your modal box is splitting into separate sections as you are not wrapping it correctly.

For example, your modal is not wrapped in a section tag as documented at Modals. you have removed the modal__container class amongst other important secltions and classes from the documented one, so your component is most likely suffering from SLDS scoping issues from not using the component as documented.

a more correct approach would be using the documented modal component as follows:

<div class="demo-only" style="height: 640px;">
  <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <header class="slds-modal__header">
          <lightning:icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" iconName="utility:close" variant="close"/>

        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

        <!-- INSERT YOUR TABLE HERE -->

      </div>
      <footer class="slds-modal__footer">
        <button class="slds-button slds-button_neutral">Cancel</button>
        <button class="slds-button slds-button_brand">Save</button>
      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>

It is basically copy pasted, I added the lightning:icon cimponent to replace the svg and a few comments for you to properly insert your table

You must log in to answer this question.

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