Sidebar is interfering with full-width inline maps

[nstjean]

The section where the sidebar exists - even if there's nothing in the sidebar covering the map - is interfering with use of the map. I click and drag the map to the left side, but not under the sidebar. It is also affecting the new map menu, it disappears when I move my mouse under the sidebar.

You can see the click and drag problem here: https://stable.publiclab.org/wiki/inline-maps

The sidebar z-index is set at 9999 currently.

@jywarren do we want the fullwidth maps to go overtop of the sidebar? Should we move the sidebar? Hide it? I'm unsure what the right answer is.

[nstjean]

@crisner You can take a look too! It's odd that the menu problem didn't happen with the old menu, but it does with the new one!

[nstjean]

I noticed that on https://stable.publiclab.org/wiki/inline-maps if you scroll down to "Maps with preset layers" you do see the same problem with the layer menu disappearing when you move the mouse. So maybe it's only a problem for maps that have specific layers in the menu, but if the menu has the entire list it's ok?

[crisner]

It seems to be a z-index issue. I used a z-index of -1 for the sidebar element with the class 'col-lg-3 d-print-none' and the mouse interacts normally with the map. The problem is the sidebar would then be hidden behind the map where it intersects. One solution is to reduce the width of the map so that it wouldn't intersect with the sidebar.

[nstjean]

I think we would like the map itself behind the sidebar, but the popup menu in front of it.

[crisner]

I'll take a look at changing the menu's z-index.

[nstjean]

It doesn't appear that z-index is the issue. I've changed the z-index of the sidebar, of the map menu, and the only thing that works is removing the sidebar column entirely.

[crisner]

Curious. Where did you added the z-index to? Did you try it out with the developer tools or in a css stylesheet. In the screenshot it doesn't look like the style is applied.

[crisner]

I tried it out in the developer console and it works. Maybe I should take a look at it locally. But only z-index less than 0 works.

[nstjean]

In the developer console and in a stylesheet, but I didn't try less than 0 because I don't want the sidebar to have issues with other things on the page.

[crisner]

Ah. Anything above -1 will not work unfortunately. We could grab the layer menu in a global css stylesheet and change its z-index there.

[nstjean]

If that works I think that's a better option

[crisner]

Adding a z-index to the inline map or the map controls is not working.

[crisner]

Also to note, looks like the simple layer control works best for sidebars. We will need to make sure to set this option to true for sidebars in the LEL code when it is bumped here.

[nstjean]

Yes, I agree. The browser menu is too big... we may have to make the simple menu look a little nicer - maybe make it look like a very stripped down version of the browser menu - but it's not a priority right now.

[nstjean]

Adding a z-index to the inline map or the map controls is not working.

That's unfortunate. I was afraid that would happen. That's odd though, that z-index doesn't affect its behavior... it's clearly a z-index issue. There must be some reason the sidebar is sticking on top.

[crisner]

Yes, I agree. The browser menu is too big...

I had expected media queries to kick in but it looks like it does not in the inline maps. 😕 It seems to be working fine even when I am using multiple maps in the example pages in LEL. Do you think it is because the maps are nested inside other divs?

[nstjean]

It's this! We delete this line and it works.

.inline-fullwidth-content {
  z-index:0 !important;
}

[nstjean]

We can change the value of that z-index to 10 and it will work... anything above 0, it seems.

[nstjean]

So the issue is either the sidebar goes completely behind the full-width-sidebar, or the sidebar goes completely in front of it. I can't seem to get the map background to be behind the sidebar, with the browser menu in front of it. It's going by the map's main z-index compared to the sidebar's main z-index. the z-index of the browser menu only affects its positioning compared to items within the map, not outside it.

[nstjean]

See Stacking Contexts: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

[crisner]

Thanks for sharing. I never would have guessed!:astonished: I assume they have different stacking contexts then? Guess it needs a lot more digging into.

[nstjean]

Yes, going by what's in that article they do. :( So the map is going to be treated like one big object in the page's layers.

[crisner]

Well, that's disappointing. 😞

[nstjean]

Ok I CAN make this work. But it involves turning off the following:

.inline-fullwidth-content {
  z-index:0 !important;
}
.leaflet-pane {
    z-index: 400;
}

This stays:

.leaflet-control {
    z-index: 800;
}

And this gets downgraded to 200 (above 0 and less than 800):

.sidebar-panel {
    z-index: 200;
}

This works because the map itself didn't get assigned a context. So now the sidebar and the map control can be compared and placed on the correct z-index.

My only question is: will this negatively affect anything else?

[nstjean]

[crisner]

This is great! With this fix do the media queries for the layer menu work?

[nstjean]

I don't think so.

[sagarpreet-chadha]

@nstjean @crisner @cesswairimu
I think i remember adding these lines long long time back!
#7395 (comment)

Can you guy verify if the Autosuggest bar in LBL model is working? I had added because the autosuggest bar was rendering below the map. Thanks!!!