5

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?

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

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
  • This solution won't work when the field is in the upper side of the view - because then it'll be covered by the header... Apr 1 '20 at 11:07
0

I've had the same problem with the combo-box and saw this solution for aura component:

https://salesforce.stackexchange.com/a/231486/30302


The only thing to change from the original solution is to remove the .THIS part from the css and then it'll work perfectly.

Your css should look like this (inside the .css file):

.slds-modal__content{
    overflow: initial;
}
3
  • this doesn't work in LWC, any thoughts how can we solve the same issue in LWC?
    – gs650x
    Aug 7 '20 at 18:56
  • @gs650x you can also increase the height of the div so the user can scroll down when opening the dropdown thus he could see it. Aug 9 '20 at 7:50
  • You will get a FIELD_INTEGRITY_EXCEPTION error: Issue(s) found by CSS Parser: CSS selector must begin with '.cMyComponent' or '.THIS'
    – Steven.B
    Aug 17 at 12:14
0

@gs650x Sorry I don't have 50 reputation to comment directly to you. you can add a <div> element outside your <lightning-combobox>, and give this div element a overflow:visible style. FYI, my sample code is here:

<div style="overflow: visible">
    <lightning-combobox
      options={typeOptions}
      onchange={handleChange}
      required>
    </lightning-combobox>
</div>

hope this'll help you.

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.