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
Akshay MenseAkshay Mense 

How to stop my lightning combobox option list going outside of screen when i scroll up the screen?

Hello, 

How to stop my lightning combobox option list going outside of screen when i scroll up the screen? 

<template if:true={showalloptions}>
                                <div class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid " >
                                    <ul class="slds-listbox slds-listbox_vertical recordListBox" >
                                        <template if:false={messages} >
                                            <template for:each={salesRepListOptions} for:item="rec">
                                                <li aria-checked="true" key={rec.value} data-key={rec.value} class="slds-listbox__item eachItem" onmousedown={selectItem}>
                                                    <div class="slds-media  slds-is-selected slds-has-focus" >
                                                        <lightning-icon icon-name="utility:user" alternative-text="icon" size="small"></lightning-icon>
                                                        <span class="verticalAlign slds-truncate" style="margin-top:15px;margin-left: 10px;">{rec.label}</span>
                                                    </div>
                                                </li>
                                            </template>
                                        </template>
                                        <template if:true={messages} >
                                            <li class="slds-listbox__item">
                                                <span class="slds-media slds-listbox__option_entity">{messages}</span>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </template>
 
Danish HodaDanish Hoda

Hi Akshay,

This is a bit of a challenge using combobox and LWC. You can use either of the below ideas to fix this -

1. Create a parent Aura component and define the div size, which combobbox will not overflow
2. Use html select option