Elm-ui z-order issue with radio options


#1

My app generates a list of items as radio options. Each item upon selection will open a menu of actions to take on that option. When leaving the menu it should close automatically. This all works as expected aside from the fact that each item in the list is above the previous item in z-order, which makes it above the attached menu of actions. Since the menu extends vertically over the next item, this leads to closing the menu inappropriately when trying to select actions on the lower area of the menu. Is it possible to resolve this?
image10

Relevant code here:

[ Input.radio []
                { onChange = \id -> LaunchItemMenu id
                , selected = Nothing
                , label = Input.labelAbove [] (text "")
                , options =
                    (List.map
                        (\( id, item ) ->
                            Input.option id
                                (Element.el
                                    (if Just id == model.currentItemID then
                                        (List.append [ Element.inFront (launchMenu model) ]
                                            (listItemStyle Active)
                                        )
                                     else if item.deleted then
                                        listItemStyle Deleted
                                     else if item.completed then
                                        listItemStyle Completed
                                     else
                                        []
                                    )
                                  (Element.text item.name)
                                )
                        )
                        (Dict.toList model.items)
                    )
                }
            ]

#2

Through positioning I’ve worked around this issue, and the behavior with regards to z-order is apparently the expected behavior. Consider this solved.


#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.