3

I have a modal with a fixed height, so if the number of fields increase in the modal, scrollbar appears as expected.

However I have a Combobox at the end of the form which I am not able to view the values, even when I try to click the scrollbar it loses focus.

Overflow-auto

Solution tried :- I tried overriding with this css

.THIS .slds-modal__content{ overflow: visible; }

(Also tried overflow: initial)

Now the problem gets solved, but it introduces a new problem, that is when an error message comes the modal goes out of the browser window size (Same thing happens when I try to add more fields to the modal) and gets hidden behind the address bar, only visible when we zoom out, the end user may not know this trick though.

Overflow initial

Browser Overflow

Here is some code --

     <div style="height:480px">
    <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 slds-modal_small">
        <div class="slds-modal__container">
            <header class="slds-modal__header">  
                <button class="slds-button slds-button_icon slds-modal__close" title="Close" onclick="{!c.closeMainModal}">
                    <lightning:icon iconName="utility:close" alternativeText="Close" size="small" />  
                    <span class="slds-assistive-text">{!$Label.c.Select_Plan_Main_Close_Alt_Text}</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Add Dependent</h2>
                <p class="slds-m-top_x-small">Provide key information about the dependent.</p>
            </header>
            <div class="slds-modal__content slds-theme_default" id="modal-content-id-1">  
                <lightning:layout class="slds-p-around_medium slds-p-bottom_x-large slds-theme_inverse" multipleRows="true"> 
                    <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="3" largeDeviceSize="6" padding="around-small"> 
                        Dependent For : {!v.employee.Name}
                    </lightning:layoutItem>
                </lightning:layout>


                <lightning:layout class="slds-p-around_x-small" multipleRows="true">
                    <!-- Form Start --> 
                    <lightning:layoutItem size="12" smalldevicesize="6" mediumdevicesize="6" largedevicesize="6" class="slds-p-around_x-small">
                        <lightning:input label="First Name" value="{!v.depRecord.FirstName}" required="true" type="text" variant="standard"></lightning:input>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="12" smalldevicesize="6" mediumdevicesize="6" largedevicesize="6" class="slds-p-around_x-small">
                        <lightning:input label="Last Name" value="{!v.depRecord.LastName}" required="true" type="text" variant="standard"></lightning:input>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="12" smalldevicesize="6" mediumdevicesize="6" largedevicesize="6" class="slds-p-around_x-small">
                        <lightning:combobox label="Relationship" value="{!v.depRecord.Relationship__c}" options="{!v.relationOptions}" placeholder="Select an option" dropdownAlignment="left" required="true" variant="standard"></lightning:combobox>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6" smalldevicesize="3" mediumdevicesize="3" largedevicesize="3" class="slds-p-around_x-small">
                        <lightning:combobox label="Birth Gender" value="{!v.depRecord.Gender__c}" options="{!v.genderOptions}" placeholder="Select an option" dropdownAlignment="left" required="true" variant="standard"></lightning:combobox>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6" smalldevicesize="3" mediumdevicesize="3" largedevicesize="3" class="slds-p-around_x-small">
                        <lightning:input label="Age" value="{!v.depRecord.Age__c}" required="true" type="number" variant="standard"></lightning:input>
                    </lightning:layoutItem>

                    <!-- Form End -->

                </lightning:layout>

            </div>

            <footer class="slds-modal__footer slds-theme_shade"> 
                <lightning:button variant="neutral" label="{!$Label.c.Select_Plan_Cancel}" title="Cancel" onclick="{!c.closeMainModal}"/>
                <lightning:button variant="brand" label="Add" title="Add" onclick="{!c.createNewDependent}" type="Submit" />
            </footer>
        </div>
    </section>

    <div class="slds-backdrop slds-backdrop_open"></div>

</div>

Can anyone please help me out of this?

  • Time to roll your own, bro. – Caspar Harmer Aug 31 '19 at 21:50
1

I think you can leverage 'dropdownAlignment="bottom-left" ' attribute of the lightning Combobox like this:

dropdownAlignment="bottom-left" 

dropdownAlignment: Specifies where the drop-down list is aligned with or anchored to the selection field. By default the list is aligned with the selection field at the top left so the list opens down. Use bottom-left to make the selection field display at the bottom so the list opens above it. Use auto to let the component determine where to open the list based on space available.

According to salesforce component library documentation, this should work. See the below screenshot lightning:combobox view as Lightning Web Component in the SF playground enter image description here

https://developer.salesforce.com/docs/component-library/bundle/lightning:combobox/specification

-1

You can use z-index css property on picklist field. Below is the link for more details on this property https://www.w3schools.com/cssref/pr_pos_z-index.asp

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.