You need to sign in to do that
Don't have an account?
Akshay 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>
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>
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