I'm running into an issue with the lightning-combobox displaying the dropdown list underneath other fields/elements. So far we have only been able to reproduce this when the LWC is used within a screen flow and viewed on a mobile device. We have reproduced this within the iOS app (haven't tried Android).

As mentioned the options do display but the background seems to be transparent as you can see other elements within the screenflow below the combobox. I assumed this was an issue with the Z-index on the .slds-dropdown or .slds-listbox. I tried overriding the z-index via the CSS, but it didn't have any effect. Please see the image below.

This is in a Winter 22 sandbox, Salesforce for iOS v. 232.06.

I can reproduce this with the basic implementation of a lightning-combobox as pulled from the component library.

    label="Test Combobox"
    placeholder="Select Progress"
import { LightningElement } from "lwc";

export default class TestComboBox extends LightningElement {
  value = "inProgress";

  get options() {
    return [
      { label: "New", value: "new" },
      { label: "In Progress", value: "inProgress" },
      { label: "Finished", value: "finished" }

  handleChange(event) {
    this.value = event.detail.value;

enter image description here

  • I am facing same issue in mobile app, did you find any solution for this? Commented Jan 21, 2022 at 23:57

1 Answer 1


In CSS Add,

lightning-combobox { 
  • Have you actually tried this on iOS? Commented Jun 5 at 10:49
  • OP states that they've already tried messing with the z-index. Also, using absolute positioning will likely mess things up even more and shouldn't generally be used unless you know exactly what you're doing (it "takes the element out of the layout flow", for those who know what that means).
    – Derek F
    Commented Jun 5 at 13:17
  • It worked for me Commented Jun 6 at 12:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .