You need to sign in to do that
Don't have an account?
Swapnali 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
I tried adding below css:
contactModal.css
I have LOVs till Level 10, now I can see till Level 5.I 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.
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.
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.I 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.
Swapnali Veer -
I am facing simillar issue. Have you found solution?
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.