function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Swapnali VeerSwapnali Veer 

Picklist/lightning-combobox not working properly in LWC Modal

Hi,
I have added a button on LWC, on click of that button one modal is getting opened.
There are few fields(text and picklist fields) and combobox on that modal.
In picklist field and combobox, there are more than 10 LOVs.
When I open the modal, I am not able to scroll till the last value in picklist and combobox. 
Sharing code below:
contactModal.html
<template>
    <lightning-card > 
        <lightning-button label="Open Modal" onclick={openmodal}></lightning-button>
            
        <div class="slds-theme_default">                      
                <template if:true={openmodel}>
                <div class="demo-only" style="height: 640px; width:110% !important;">
                    <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">
                                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                                    <lightning-icon icon-name="utility:close" size="medium">
                                    </lightning-icon>
                                    <span class="slds-assistive-text">Close</span>
                                </button>
                                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Project Score Details</h2>
                            </header>
                            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                                    <lightning-record-edit-form record-id="0030o00002nBlsDAAS"
                                            object-api-name="Contact"><!-- any test contact id-->
                                        <lightning-messages>
                                        </lightning-messages>
                                        <div class="slds-grid slds-gutters">
                                             <div class="slds-col">
                                                <lightning-output-field field-name="AccountId">
                                                </lightning-output-field>
                                                <lightning-input-field field-name="FirstName">
                                                </lightning-input-field>
                                                <lightning-input-field field-name="Lightning_pack__Level__c">
                                                </lightning-input-field>
                                                
                                            </div>
                                            <div class="slds-col">
                                                <lightning-input-field field-name="LastName">
                                                </lightning-input-field>
                                                <lightning-input-field field-name="Email">
                                                </lightning-input-field>
                                                <lightning-combobox
                                                name="progress1"
                                                label="Status"
                                                value={value}
                                                placeholder="Select Progress"
                                                options={options}
                                                onchange={handleChange} ></lightning-combobox>
                                            </div>
                                        </div>
                                        <lightning-button
                                            class="slds-m-top_small"
                                            variant="brand"
                                            type="submit"
                                            name="update"
                                            label="Update" onclick={saveMethod}>
                                        </lightning-button>
                                    </lightning-record-edit-form>
                                </div>
                               
                        </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </div>
                </template>
            </div>
    </lightning-card>
</template>
contactModal.js
import { LightningElement, track, api} from 'lwc';


export default class contactModal extends LightningElement {
    @api recordId;
    
    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Option1', value: 'Option1' },
            { label: 'Option2', value: 'Option2' },
            { label: 'Option3', value: 'Option3' },
            { label: 'Option4', value: 'Option4' },
            { label: 'Option5', value: 'Option5' },
            { label: 'Option6', value: 'Option6' },
            { label: 'Option7', value: 'Option7' },
            { label: 'Option8', value: 'Option8' },
            { label: 'Option9', value: 'Option9' },
            { label: 'Option10', value: 'Option10' },
        ];
    }
    
     @track openmodel = false;
    openmodal() {
        this.openmodel = true
    }
    closeModal() {
        this.openmodel = false
    } 
    saveMethod() {
        this.closeModal();
    }
}
I can see only one value in Picklist and same for combo-box.
User-added image

I tried adding below css:
contactModal.css
.slds-modal__content{
    overflow: initial;
}
I am able to see more values now, but not all.
I have LOVs till Level 10, now I can see till Level 5.User-added imageI tried adding scrollable to slds-modal__content or for combo-box/field.
It is not working.
Please provide some solution for this.
Thanks in advance.


 
ASHOK RAJ R 18ASHOK RAJ R 18

Swapnali Veer -

I am facing simillar issue. Have you found solution?

Damian PooleDamian Poole
You can allow the comobox to calculate it's position based on the available screen size using this property dropdown-alignment="auto"
ASHOK RAJ R 18ASHOK RAJ R 18

Finally I found the solution-

         Add this below tag after <lightning-record-edit-form record-id>
<div class="slds-scrollable" style="height:30rem">

It worked fine for me.

Raju Krishnamoorthy 17Raju Krishnamoorthy 17
This helped. Thanks Ashok Raj.