• Swapnali Veer
  • NEWBIE
  • 0 Points
  • Member since 2015


  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
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.