+ Start a Discussion
Amarkant JadhavAmarkant Jadhav 

Lightning : Issue in slds modal

I have developed new Modal using lightning desing system.In standard modal new button pop up appears on whole broweser lightning page. But when I desgined using SLDS it will come up but still salesforce header bar is accesible which will display on my modal component

standard way :
User-added image

SLDS Modal :
User-added image

Component Code :
<aura:component controller="QuickInvestorController" implements="force:appHostable">
   
        <div class="slds-modal slds-fade-in-open" style="display:none;" aria-hidden="false" role="dialog" id="QuickInvestor_modal">
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Quick Investor</h2>
                    <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}">
                        <c:svg class="slds-button__icon slds-button__icon--large"
                               xlinkHref="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#close"
                               ariaHidden="true"
                               />
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="form-element__group">
                        <div class="slds-form-element__row">
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputText aura:id="newinvestor" label="Investor Contact Role"
                                              labelClass="slds-form-element__label" class="slds-input"/>
                            </div>
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputSelect aura:id="newinvestor" labelClass="slds-form-element__label"
                                                required="false" class="slds-input" label="Default Email">
                                    <ui:inputSelectOption text="Work1" label="Work1"/>
                                    <ui:inputSelectOption text="Work2" label="Work2"/>
                                </ui:inputSelect>
                            </div>
                        </div>
                    </div>
                    <div class="form-element__group">
                        <div class="slds-form-element__row">
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputText aura:id="expname" label="Account Name"
                                              class="slds-input" labelClass="slds-form-element__label"   value="{!v.quickinvestor.Name}"
                                              required="true"/>   
                                
                            </div>
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputNumber aura:id="expname" label="Email Salutation"
                                                class="slds-input"
                                                labelClass="slds-form-element__label"
                                                value="{!v.quickinvestor.Email_Salutation__c}"
                                                required="true"/>       
                            </div>
                        </div>
                    </div>
                    <!-- -----------Fields --------------------------------->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral">Cancel</button>
                    <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
                </div>
            </div>
        </div>
         <div class="slds-backdrop slds-backdrop--open" id="QuickInvestorBackground" style="display:none;"></div>
   
</aura:component>
bhanu kanuman1bhanu kanuman1
Hi have u figured this out if please can you share the code?
vanessenvanessen
Got the same problem too. The only I found to solve this was to limit the height of tyhe modal like this :

in the CSS :

.THIS .xcs-fix-max-height{
    max-height: 200px;
}

In my component :

<div role="dialog" class="slds-modal slds-modal--large slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCancel}">
                    <lightning:icon iconName="utility:close" size="small" />
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 class="slds-text-heading--medium">{!v.windowTitle}</h2>
            </div>            

            <div aura:id="xid-cmp-body" class="slds-modal__content slds-p-around--medium slds-is-relative xcs-fix-max-height">
                <lightning:spinner variant="brand" size="small"/>
                <!--####################################################### -->
                <!-- The component is dynamically loaded here -->
                <!--####################################################### -->                              
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral" onclick="{!c.handleCancel}">{!$Label.c.GLO_Annuler}</button>
                <button class="slds-button slds-button--brand" disabled="{!v.disableSave}" onclick="{!c.sendActionSave}">{!v.saveButtonText}</button>
            </div>
        </div>
    </div>
   <div class="slds-backdrop slds-backdrop--open"></div>
 
Scott McBride 18Scott McBride 18
Why did you post this when it clearly does not answer Amarkant's question?