Skip to content

Select elements with dropdown menus have screwy Z order #146

@Steve-OH

Description

@Steve-OH

The big picture of what I'm trying to do

I'm trying to use two select elements with dropdown menus, one above the other.

What I did

A working example is here: https://ellie-app.com/mSyCvb65La1/0

To see the problem, select something in the lower field, then try to select something in the upper field. The upper field's dropdown menu is displayed underneath the lower field, so that you can't select anything in the overlapping part of the menu.

(Note that this example also exhibits the problem described in #108, but that's not what this one is about.)

What I Expected To Happen

Dropdown menus should have "topmost" Z order, so that they are displayed above all other elements on the page.

What Actually Happened

The Z order of dropdown menus appears to be interspersed with the Z order of "normal" elements.

Versions

  • Elm: 0.18
  • style-elements: 4.3.0
  • Browser: Chrome 64.0.3282.186, Firefox 58.0.2, Edge 41.16299.248.0
  • Operating System: Windows 10 1709/16299.248, macOS 10.13.2

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions