ol3.css - Overflow:auto in sidebar-content makes the header disappear

[umbe1987]

Hi and thanks for this neat project!
I'd like to add overflow:auto to the sidebar-content so that when my innerHTML is too wide or tall I can see it by scrolling x or y.
I see the default in ol3-sidebar.css is

.sidebar-content {
...
overflow-x: hidden;
overflow-y: auto;
...

First problem is: when I y-scroll, the header disappear like:

OVERFLOW-Y

Second problem: if I change overflow-x: hidden; to overflow-x: auto; again the header goes away as I scroll rightward, like:

OVERFLOW-X

Is there a way to avoid this?

[umbe1987]

@Turbo87 If you think this would be a reasonable addition to your project, I would be happy to do a PR.
I think the trick would be to somehow make the sidebar-header elem out of the sidebar-content. If you also have ideas, I'm happy to hear!
Thanks.

[Tobias Bieniek]

you could add another div element inside the sidebar content and make that overflow: auto

[umbe1987]

@Turbo87 Thanks for the fast feedback.

It is already a div within a div.
Here is the HTML:

As you can see, the sidebar contains:

• div .sidebar-content: contains the entire sidebar (all the tab panes)
  • div .sidebar-pane: contains a single tab pane (.active if it's the one I am using
    • H1 .sidebar-header: contains the header of this tab pane
    • div #toc: contains the HTML content I'd like to scroll

If I remove the overflows properties from .sidebar-content class and insert overflow:auto in the .sidebar-pane, OR in the #toc, I don't get the scroll bar to appear.

This is what happens if I force overflow:scroll to one of the two mentioned div:

The scrollbar is shown but greyed out because (I guess) the content is taller than the container and thus theoretically does not need to scroll. However, the content "goes out of the screen".

Hope I didn't miss anything.

[umbe1987]

Just to make sure the problem was not in my code, I tried the same with the example of this repo (https://github.com/Turbo87/sidebar-v2/blob/master/examples/ol3.html) and I confirm the same happens.

@Turbo87

I think it would be nice to have a scrollable content within a pane with the header being always fixed.
Again, I'd be very happy to do a PR if you think it is useful.
I think it is very important for those like me having very long/large content (as in the #home tab in ol3.html example).

Please let me know if I can help with this.
Thanks!

[umbe1987]

Ok so here is my closest try so far.

The original code below (ol3.html example):

ORIGINAL

<!-- Tab panes -->
<div class="sidebar-content">
    <div class="sidebar-pane" id="home">
        <h1 class="sidebar-header">
            sidebar-v2
            <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
        </h1>

        <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>

, was changed to:

MODIFIED

<!-- Tab panes -->
<div class="sidebar-content">
    <div class="sidebar-pane" id="home">
        <div><h1 class="sidebar-header">sidebar-v2
            <span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
        </div>
        <div class="sidebar-content" style="top: 40px;">
        <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
        ...
        </div>

The trick was to treat the content I need to scroll as a separate div (as suggested by @Turbo87 ), but I still had to:

1. give it class=class="sidebar-content"
2. give it style="top: 40px;" (as the sidebar-header height is 40px)

This way I was able to ALMOST do what I need, but I still need to adjust something, as the content has too left margin. But I'm very close!

Will come back with this as I move forward.

[umbe1987]

This way I was able to ALMOST do what I need, but I still need to adjust something, as the content has too left margin.

"style=left:0px;" did the trick, as a sidebar-content class within another sidebar-content will have double left:40px space.

Don't know if this is "a nice way to do it" but it seems to work pretty well.

[umbe1987]

Anyway, sorry to bother again, but I think it would be very nice to add another class that would serve this purpose. I believe this would be very useful for many others.

Like (not tested, but should work):

.sidebar-inner {
  position: absolute;
  top: 40px;
  left: 0px;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  overflow: auto; }
  .sidebar.collapsed > .sidebar-inner {
    overflow: hidden; }