I have an aura Parent Component that has a table and a child component, where it is iterated in order to display each row separately. On each row of my child cmp i have a button where i want to open a modal. My problem is that the modal is not dispayed properly. I worry that it has to be on the parent component in order to be displayed properly, but i need to have it on child level in order to capture each row separately. I want to have my modal in the middle of my screen without changing anything in my background, as it does now... Has anyone faced something similar in the past ?
Code below: Pls focus on the end of parent cmp where i embed the child cmp and in the child cmp Parent CMP
<!-- @Author : Christos Kolonis & George Galaios
@Date : 24/03/2021
@Desc : Lightning component that shows the available bundled categories and offers for the current user
-->
<aura:component controller="el_bundledOffersController" implements="lightning:availableForFlowScreens,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<!-- Register Events -->
<aura:handler name="sampleComponentEvent" event="c:el_OfferMemberConfigurationEvent" action="{!c.handleComponentEvent}"/>
<!--Attributes Definitions -->
<!-- Basket Id -->
<aura:attribute name="basketId" type="String"></aura:attribute>
<aura:attribute name="mapList" type="List" />
<aura:attribute name="value" type="String" default=""/>
<aura:attribute name="selectedOfferId" type="String"/>
<aura:attribute name="offerSelected" type="Boolean" default="false"/>
<aura:attribute name="nextClicked" type="Boolean" default="false"/>
<!-- attribute for storing current Account -->
<aura:attribute name="currentAccount" type="String" />
<!-- attribute for offermembers -->
<aura:attribute name="offerMembersList" type="List" />
<!-- Loading spinner Attribute -->
<aura:attribute name="spinner" type="boolean" default="false"/>
<!-- Attribute to gey out background -->
<aura:attribute name="isModalOpen" type="boolean"/>
<!-- Attribute with stored offers when user presses add -->
<aura:attribute name="storedSelectedOffer" type="Object[]"/>
<!-- Attribute indicating whether an offer was selected/added by user -->
<aura:attribute name="offerToBeDisplayed" type="String"/>
<!-- Attribute indicating whether the modal containing the message if the user is sure to finish the functionality is displayed or not -->
<aura:attribute name="confirmModal" type="Boolean" default="false"/>
<!-- End of Attributes Definitions -->
<!--loading spinner start... style=Brand Medium (blue dots)-->
<aura:if isTrue="{!v.spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- Loading spinner end-->
<!-- Define Handlers -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- TEST LIST OF OFFERS SELECTED BY USER -->
<!-- <aura:iteration items="{!v.storedSelectedOffer}" var="off">
Selected Offer Name: {!off.configName}<br/>
Offer Member Id: {!off.offerMemberId}<br/>
</aura:iteration>-->
<!-- END -->
<!-- End of Handlers Definition -->
<!-- Bundled Offers Catalogue Section -->
<aura:if isTrue="{!not(v.nextClicked)}">
<lightning:card footer="" title="{!$Label.c.el_Bundled_Offers_Catalogue}">
<lightning:layout>
<lightning:layoutItem padding="around-small">
<aura:iteration items="{!v.mapList}" var="map">
<lightning:accordion allowMultipleSectionsOpen="true">
<lightning:accordionSection
name="{!map.category.Id}"
label="{!map.category.Name}">
<aura:set attribute="body">
<aura:iteration items="{!map.offers}" var="offer">
<ui:inputCheckbox class="myCheckbox" aura:id="offer" name="{!offer.value}" label="{!offer.label}" change="{!c.onCheck}"/>
</aura:iteration>
</aura:set>
</lightning:accordionSection>
</lightning:accordion>
</aura:iteration>
<!-- Button to move to the Configuration of the Members -->
</lightning:layoutItem>
</lightning:layout>
</lightning:card>
<div class="slds-col slds-size_1-of-1">
<div class="slds-p-top_medium"></div>
</div>
<lightning:button variant="brand" label="{!$Label.c.el_Next}" title="{!$Label.c.el_Next}"
onclick="{!c.handleNext}" disabled="{!not(v.offerSelected)}" class="slds-float_right"/>
</aura:if>
<!-- Offer Members Configurations -->
<aura:if isTrue="{!v.nextClicked}">
<lightning:card footer="" title="{!$Label.c.el_Bundled_Offer_Configuration}">
<!-- <div class="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-large-size_2-of-3">-->
<!-- <div class="container">-->
<!-- <div class="slds slds-modal__content"> -->
<table class="slds-table slds-table--bordered slds-table--striped slds-table_fixed-layout slds-table_resizable-cols" aria-multiselectable="true" role="grid" >
<!-- Headers section -->
<thead>
<tr class="slds-line-height_reset" >
<th class="slds-text-align_right" scope="col" style="width:3.25rem">
</th>
<th aria-label="Offer Member" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="0">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Name">Offer Member</span>
</div>
</a>
</th>
<th aria-label="Account" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="0">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Account">Account</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
</span>
</div>
</a>
</th>
<th aria-label="Active Subscription" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="0">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Active Subscription">Active Subscription</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
</span>
</div>
</a>
</th>
<!-- Added to display the selected by the user product configuration -->
<aura:if isTrue="{!not(empty(v.offerToBeDisplayed))}">
<th aria-label="Selected Offer" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="0">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Active Subscription">Selected Offer</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
</span>
</div>
</a>
</th>
</aura:if>
<!-- End of displayed product configuration to user -->
</tr>
</thead>
<!-- End of Headers section -->
<!-- Body section -->
<tbody>
<!-- Embed the el_OfferMemberConfiguration Child Component -->
<aura:iteration items="{!v.offerMembersList}" var="offerMember" indexVar="index">
<c:el_OfferMemberConfiguration offerMemberData="{!offerMember}" currentAccount="{!offerMember.accountId}"
isActiveSubscription="false" currentBasketId="{!v.basketId}" storedSelectedOffer="{!v.storedSelectedOffer}"
bundledOfferId="{!v.selectedOfferId}">
</c:el_OfferMemberConfiguration>
</aura:iteration>
</tbody>
</table>
<!-- </div> -->
<!-- </div> -->
</lightning:card>
<div class="slds-col slds-size_1-of-1">
<div class="slds-p-top_medium"></div>
</div>
<lightning:button variant="brand" label="{!$Label.c.el_Previous}" title="{!$Label.c.el_Previous}"
onclick="{!c.handlePrevious}" class="slds-float_left"/>
<lightning:button variant="brand" label="Finish" title="Finish"
onclick="{!c.onFinish}" class="slds-float_right"/>
</aura:if>
<!--</div>-->
</aura:component>
Child CMP
<!-- @Author : George Galaios
@Date : 24/03/2021
@Desc : Lightning component that shows an Offer Member Row and invokes Lightning Datatable for
the selected row. Used as child Component of the el_BundledOffers.cmp
-->
<aura:component controller="el_bundledOffersController"
implements="lightning:availableForFlowScreens,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<!-- Register Events -->
<aura:registerEvent name="sampleComponentEvent" type="c:el_OfferMemberConfigurationEvent"/>
<!-- Attributes Definitions -->
<!-- Attribute for current Basket -->
<aura:attribute name="currentBasketId" type="String"/>
<!-- Attribute Bundled Offer selected -->
<aura:attribute name="bundledOfferId" type="String"/>
<!-- Attribute for current Offer Member -->
<aura:attribute name="offerMemberData" type="object"/>
<!-- attribute for accountlookup -->
<aura:attribute name="currentAccount" type="String" />
<!-- Attribute for Active Subscription checkBox -->
<aura:attribute name="isActiveSubscription" type="Boolean" default="false"/>
<!--Boolean attribute to indicate if modal is open or not default value is false as modal is closed when page is loaded -->
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<!-- Loading spinner Attribute -->
<aura:attribute name="spinner" type="boolean" default="false"/>
<!-- Attribute for available Product Configurations -->
<aura:attribute name="availableProdConfigurations" type="List"/>
<!--Attributes for lightining datatable-->
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<!-- Attribute to gey out background -->
<aura:attribute name="greyOut" type="boolean" default="false"/>
<!-- Attribute to store the offer/product configuration selected by user -->
<aura:attribute name="selectedOffer" type="Object[]"/>
<!-- Attribute to store the offer/product configuration selected by user when "Add" is pressed -->
<aura:attribute name="storedSelectedOffer" type="List"/>
<!-- Attribute to store the added offer/configuration selected by user when "Add" is pressed and display it -->
<aura:attribute name="offerToBeDisplayed" type="String"/>
<!-- Attribute to store preselected offer/row when the user presses "Edit" button -->
<aura:attribute name="selectedRows" type="List"/>
<!-- Attribute to indicate whether the "is Active Subscription" checkbox is disabled or not -->
<aura:attribute name="disabled" type="Boolean" default="false"/>
<!-- End of Attributes Definitions -->
<!--loading spinner start... style=Brand Medium (blue dots)-->
<aura:if isTrue="{!v.spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- Loading spinner end-->
<tr aria-selected="false" class="slds-hint-parent" data-record="{!index}">
<td class="slds-text-align_right" role="gridcell" >
</td>
<th scope="row">
<div class="slds-truncate" title="OfferMember" >{!v.offerMemberData.offerMember.Name}</div>
</th>
<c:el_sObjectLookup objectAPIName = "Account" fieldAPINames = "Name,el_TIN__c" subHeadingFieldsAPI = "el_TIN__c"
lookupIcon = "standard:account" placeholder = "Search Account"
selectedRecordId= "{!v.currentAccount}" disabled="{!v.disabled}"/>
<td role="gridcell" >
<div class="slds-truncate" title="Subscription" ><ui:inputCheckbox aura:id="subscription" name="{!index}" label="" disabled="{!v.disabled}" change="{!c.onSubscrClick}"/></div>
</td>
<aura:if isTrue="{!not(empty(v.offerToBeDisplayed))}">
<td role="gridcell" >
<div class="slds-truncate" title="Selected Offer" >{!v.offerToBeDisplayed}</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="false" tabindex="0" title="Edit Button">
<span class="slds-assistive-text" data-id="{!index}"></span>
<lightning:button label="Edit" iconName="utility:edit" value="{!index}" name="{!v.offerMemberData.offerMember.Id}" class="{!v.isActiveSubscription}" iconPosition="left" onclick="{!c.handleSearch}"/>
<lightning:button label="Remove" iconName="utility:delete" value="{!index}" name="{!v.offerMemberData.offerMember.Id}" class="{!v.isActiveSubscription}" iconPosition="left" onclick="{!c.handleRemove}"/>
<!--onclick="{!c.handleSearch}"-->
</button>
</td>
<aura:set attribute="else">
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="false" tabindex="0" title="Search Button">
<span class="slds-assistive-text" data-id="{!index}"></span>
<lightning:button label="Search" iconName="utility:search" value="{!index}" name="{!v.offerMemberData.offerMember.Id}" class="{!v.isActiveSubscription}" iconPosition="left" onclick="{!c.handleSearch}"/>
<!--onclick="{!c.handleSearch}"-->
</button>
</td>
</aura:set>
</aura:if>
</tr>
<!-- Use LARGE modal/Pop-up Box to display Datatable.-->
<!--Use aura:if tag to display/hide popup based on isModalOpen value-->
<aura:if isTrue="{!v.isModalOpen}">
<div class="slds-m-around_xx-large" >
<!-- Modal/Popup Box starts here-->
<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">
<!--loading spinner start-->
<div class="slds-is-relative">
<aura:if isTrue="{!v.spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--medium slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!--Loading spinner end-->
<!-- Modal/Popup Box Header Starts here-->
<header class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{! c.closeModel }"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Configuration Selection</h2>
</header>
<!-- Modal/Popup Box Header Ends here-->
<!--Modal/Popup Box Body Starts here-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning:datatable aura:id="infoTable" columns="{! v.columns }" data="{! v.data }" keyField="configId" maxRowSelection="1"
showRowNumberColumn="false" onrowselection="{!c.configurationSelection}" selectedRows="{!v.selectedRows}" />
</div>
<!--Modal/Popup Box Body Ends here-->
<!--Modal/Popup Box Footer Starts here-->
<footer class="slds-modal__footer">
<lightning:button variant="neutral" label="Cancel" title="Cancel" onclick="{! c.closeModel }"/>
<aura:if isTrue="{!not(empty(v.offerToBeDisplayed))}">
<lightning:button variant="neutral" label="Save" title="Save" onclick="{!c.handleEdit}"/>
<aura:set attribute="else">
<lightning:button variant="neutral" label="Add" title="Add" onclick="{!c.storeSelectedOffer}"/>
</aura:set>
</aura:if>
</footer>
<!--Modal/Popup Box Footer Ends here-->
</div> <!-- Close spinner relative -->
</div>
</section>
<aura:if isTrue="{!v.isModalOpen}">
<!-- Grey Background -->
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</div>
</aura:if>
</aura:component>
document, if your HTML document is 500 px height, then by default your modal will be of this size, check if browser dev tools how big is your page currently, does it take a whole screen size?