Dropdown menu overlapped by tile layer

[cardinalgeo]

Hi Trame Team!

How do I ensure that the dropdown options are in front of the tile layer rather than behind, as they currently are in the screenshot below?

[jourdain]

@banesullivan just solved it on his testing by bumping the z-index.

[jourdain]

Not sure about the exact fix but I think he did the following

with layout.toolbar as toolbar:
   toolbar.style = "z-index: 1000"

[cardinalgeo]

This worked, thanks @jourdain and @banesullivan!

[banesullivan]

@cardinalgeo, take a look at my Trame-tileserver example for some updates to the problems you had

[cardinalgeo]

Ooh, I'll take a look!

[banesullivan]

We should re-open this issue as it appears that the issue is with the z-index of the TileLayer. The zIndex prop of the LTileLayer doesn't seem to be used:

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import leaflet, vuetify

server = get_server()
state, ctrl = server.state, server.controller

state.trame__title = "Leaflet Test"

with SinglePageLayout(server) as layout:
    # Toolbar
    layout.title.set_text(state.trame__title)

    with layout.toolbar:
        layout.toolbar.style = "z-index: 2;"

        vuetify.VSpacer()

        vuetify.VSelect(
            v_model=("table_name", "table 1"),
            items=("table_names", ["table 1", "table 2"]),
            dense=True,
            hide_details=True,
            style="max-width: 200px;",
        )

    # Main content
    with layout.content:
        with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
            with leaflet.LMap(zoom=3):
                leaflet.LTileLayer(
                    url=(
                        "basemap_url",
                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    ),
                    attribution=(
                        "attribution",
                        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                    ),
                    z_index=1,
                )

    # Footer
    layout.footer.hide()

if __name__ == "__main__":
    server.start()

[jourdain]

That a style thing, not an attribute?

On Wed, Apr 26, 2023 at 09:30 Bane Sullivan @.***> wrote:

We should re-open this issue as it appears that the issue is with the z-index of the TileLayer. The zIndex prop of the LTileLayer doesn't seem to be used:

from trame.app import get_serverfrom trame.ui.vuetify import SinglePageLayoutfrom trame.widgets import leaflet, vuetify server = get_server()state, ctrl = server.state, server.controller state.trame__title = "Leaflet Test"

with SinglePageLayout(server) as layout:

Toolbar

layout.title.set_text(state.trame__title)

with layout.toolbar:
    layout.toolbar.style = "z-index: 2;"

    vuetify.VSpacer()

    vuetify.VSelect(
        v_model=("table_name", "table 1"),
        items=("table_names", ["table 1", "table 2"]),
        dense=True,
        hide_details=True,
        style="max-width: 200px;",
    )

# Main content
with layout.content:
    with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
        with leaflet.LMap(zoom=3):
            leaflet.LTileLayer(
                url=(
                    "basemap_url",
                    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png <http://tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png>",
                ),
                attribution=(
                    "attribution",
                    '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                ),
                z_index=1,
            )

# Footer
layout.footer.hide()

if name == "main": server.start()

[image: Screen Shot 2023-04-26 at 9 29 58 AM] https://user-images.githubusercontent.com/22067021/234625623-b8d5085a-878a-435b-8494-938267127304.png

— Reply to this email directly, view it on GitHub https://github.com/Kitware/trame-leaflet/issues/6#issuecomment-1523620633, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACH45SYHRXRUL4TQYV5YDTXDE5RNANCNFSM6AAAAAAUXFN2UI . You are receiving this because you were mentioned.Message ID: @.***>

[banesullivan]

We should be able to control it via this attribute, right?

https://github.com/Kitware/trame-leaflet/blob/c4ea0a2ef76986033f8e114076058df9c25209e4/trame_leaflet/widgets/leaflet.py#L446

[jourdain]

If that list of attributes are correct, then yes. But that could also be internal to the layers and not css related. You may need to adjust the zindex of the main map container using the style if you want the drop down to go above.

On Wed, Apr 26, 2023 at 09:43 Bane Sullivan @.***> wrote:

We should be able to control it via this attribute, right?

https://github.com/Kitware/trame-leaflet/blob/c4ea0a2ef76986033f8e114076058df9c25209e4/trame_leaflet/widgets/leaflet.py#L446

— Reply to this email directly, view it on GitHub https://github.com/Kitware/trame-leaflet/issues/6#issuecomment-1523640809, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACH45TOEPWPNY63RCDTVXDXDE7AJANCNFSM6AAAAAAUXFN2UI . You are receiving this because you were mentioned.Message ID: @.***>

[banesullivan]

Following up from offline conversations. This needs to be done with styling and the z_index property is for managing relative z levels of layers/markers in leaflet (as far as I can tell).

When creating the LMap, style it like:

with leaflet.LMap(style="z-index: 0;"):
    ...