walkermatt / ol-layerswitcher

Layer control for OpenLayers
MIT License
387 stars 176 forks source link

Title lengths? #335

Closed movethathoof closed 3 years ago

movethathoof commented 4 years ago

Hello, my apologies if this is mentioned somewhere - I looked through the examples and documentation and didn't find anything - but I can't find a way to have longer titles for uncombined layers stay on the same line as their selection box. I've attached two photos that demonstrate what I mean: if a layer is not combined and it has a long title then it automatically will skip to a new line from its selection box. If the title is shorter, it remains on that line (or, as can be seen with the other layers below, if it is combined it also starts on that line). I tried inserting a break after a portion of the text, which did not have the desire effect. Have I missed something?

Thank you!

Legend Title 1 Legend Title 2

walkermatt commented 4 years ago

Hi, do you have a link to an example that illustrates the issue?

movethathoof commented 4 years ago

Hi! Sorry that this reply is so delayed - I tried throwing together a plunkr, but could only get the layer switcher to work with layers collapsed, making it useless as demonstration of this issue.

That meant I had to wait until I could get it up elsewhere, which altered the issue somewhat. Here you can see the issue as I first raised it, where the title is moved to a different line from the arrow and checkbox.

However, in putting together this demonstration I found that there seems to be a conflict with the Bootstrap css that is also loaded on some pages, for, as demonstrated here, when there is no Bootstrap css the title remains on the right line. That said, regarding style and consistency, you can see that that title begins on the next line from the arrow, unlike every other that begins aligned with where the title begins on the first line.

Thank you!

walkermatt commented 4 years ago

Hi, I released a new version today which includes some improvement to wrapping of long layer titles. See the CHANGELOG and linked issue for details. I've also updated the main example to include a longer wrapped title. Let me know how you get on.

/cc @devsupportman

movethathoof commented 4 years ago

Thank you for the swift reply! The issues here noted about skipping to a new line or where is starts on a new line would appear to have been resolved.

That said, as can be seen on either of the two demonstration maps I shared, when the layers extend past the bottom of the map the scrollbar no longer appears and leaves them inaccessible.

As well, there's still a kind of strange interaction with the Bootstrap CSS - the spacing between lines of the second link ('map2', which loads the bootstrap CSS) is much greater than the first (and the line appears to be slightly lower and not aligned with the checkbox?).

walkermatt commented 3 years ago

@devsupportman have you seen this issue with ol-ishare?

when the layers extend past the bottom of the map the scrollbar no longer appears and leaves them inaccessible.

petergoulborn commented 3 years ago

@devsupportman have you seen this issue with ol-ishare?

when the layers extend past the bottom of the map the scrollbar no longer appears and leaves them inaccessible.

I think this can be resolved by allowing overflow scrolling and limiting the height on the layer switcher, e.g.:

.layer-switcher.shown {
    overflow-y: auto;
    max-height: 50%;
}
walkermatt commented 3 years ago

@movethathoof I've just done some testing and I found that adding the following rule did the trick for me:

.layer-switcher.shown {
  height: calc(100% - 6.5em);
}

Tested on Chrome, Firefox, Edge 18 & 86.