Add CSS to scroll when needed by default

[walkermatt]

Currently when the layer switcher is displaying more layers than will fit vertically those layers at the bottom are hidden from view. The scroll example demonstrates how to set a max-height and display a scroll bar when needed but this needs to be manually configured.

This is to propose the following CSS which would limit the height of the layer switcher to just above bottom of the map allows a space for the attribution control:

.layer-switcher.shown {
    max-height: calc(100% - 5.5em);
    overflow-y: auto;
}

[petergoulborn]

This seems like a reasonable default.

[richard-thomas]

Definitely agree it would be good to make it scroll by default. However, with activationMode == 'click', the closer button scrolls up and out of sight as the button is part of the layer-switcher div. I have solved this issue in my code by using "fixed" positioning for the button as follows (I have also moved the closer over to the right as a personal preference):

.layer-switcher.shown {
    max-height: calc(100% - 5.5em);
    overflow-y: auto;
}
.layer-switcher.shown.layer-switcher-activation-mode-click > button {
    position: fixed;
    right: 0.5em;
    left: auto;
}

However, if you exclude the "right: 0.5em;" then this breaks your normal positioning of the closer just to the left of the menu top (it forces it to the far left), so you would need something else as a default.

[walkermatt]

Thanks @richard-thomas I'll take a look

[paul121]

This would be a welcome change! We did something more rudimentary for our implementation of the layer switcher in farmOS-map: https://github.com/farmOS/farmOS-map/pull/101

One minor issue with this *proposed approach is that the bottom border is is not displayed when there are lots of layers. When setting max-height to a fixed value it seems to keep the border:

Using max-height: calc(100% - 5.5em) | Using max-height: 300px |||

[petergoulborn]

Have you tried something like this?

.layer-switcher.shown {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 5.5em);
}

Then the scrolling is done inside the .panel element.

[richard-thomas]

Have you tried something like this?

.layer-switcher.shown {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 5.5em);
}```
Then the scrolling is done inside the `.panel` element.

Flexbox might be an issue in Internet Explorer 11; I've not tried (my app doesn't support IE11, but others might want), but looking at notes when height isn't explicitly defined in:

https://caniuse.com/flexbox

[walkermatt]

Given that IE11 is soon out of support and may people have already dropped support I'm in favour of adopting the flexbox approach; should IE11 support be required then it can be supported by adding a fixed max-height just for IE11 like so:

/* Fixed max-height for IE11 to support scrolling, due to incomplete support for flexbox */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  .layer-switcher.shown {
    max-height: 170px;
  }

}

[walkermatt]

Example of the above approach which should scroll reliably on modern browsers and IE11.

Changes: https://github.com/walkermatt/ol-layerswitcher/commit/2115f8e591fdd2add93bcc92d9e301a7d430a096.