Simplebar: Glitch resizing a div caused by simplebar

[villeneuve-michael]

Current Behavior

I have an application and I want to resize a div width. The application layout has 3 column:

• 2 fixed sidebar (left and right)
• 1 main container in the middle

There is 1 of my sidebar that I want to resize (view the screecast below).

Without the plugin enabled, all is perfect. However, when I activated simplebar, there was a weird behaviour where the sidebar would expand offscreen.

Expected behavior

I want the div the resize as expected

Reproducible example

Since it's a pretty big app, it's easier for me to share the problem via screencast

Suggested solution(s)

So after playing with different options, I figured out the following solution :

.simplebar-placeholder {
  display: none;
}

Additional context

Since I installed the plugin today, I didn't feel confortable issuing a pull request since maybe adding display: none will break other features.

[Grsmto]

Hi Michael,
It seems like the simplebar-placeholder is resizing properly from what I see in your screencast, so this might "just" be a CSS issue. Hard to say without seeing the code but how are you doing the "expand/minimize"? Is it a CSS animation? What's your CSS for this animation?

[Spegeli]

I installed this scrollbar plugin today and i can get a similar with the placeholder div.

This is how is looks placeholder enabled / showen:
http://i.epvpimg.com/YNMLdab.png

This is how is looks placeholder disabled / hidden:
http://i.epvpimg.com/GaIhcab.png

As you can see when the placeholder div is showen, i see the normal sidebar too.
My page is normal ~950px high but the placeholder makes it ~1500px and i think from this oversize it comes the issue.

//Edit: I done some more research. First i used the latest Version (i think 3?) there i got the issue. With Version 2.6.1 everything is fine but as i can see 2.6.1 dont contains "simplebar-placeholder" div.

[villeneuve-michael]

@Grsmto

It's a simple transition. I toggle the expand class on my sidebar:

aside {
  flex: 0 0 auto;
  width: 260px;
  &.expand {
     width: 520px;
  }

  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}

Edit: just to clarify, I want to create a similar layout to twitch (and twitch uses your plugin by the way, that's how I found out about this package). So I have 2 fixed size sidebar in desktop and 1 main container.

[adjourn]

I always encourage to make a minimum example that highlights the bug, fixes could take forever if author(s) have to reproduce every bug themselves based on screencast or description.

@Grsmto This example should highlight the problem.

Im not sure what to make out of this bug because center placeholder gets resized/recalculated only if it has display: none; style. I tried to hack with el.recalculate() but I don't have anything good to show.

[Grsmto]

@Spegeli your issue is unrelated to this one. You probably just have some CSS clashing with the Simplebar element. Try removing any CSS you applied that might break the plugin.

@adjourn thanks for the demo! I'll take a look, I might have an idea how to fix this.
The placeholder is defining a fixed width so the content can't shrink. However it's a different issue from the one of @villeneuve-michael because on its screencast we can see that the placeholder is resizing properly. It seems to be something else.

[adjourn]

@Grsmto Are you sure? It looks like video shows sidebar placeholder styles but the problem (as I see it) is that center placeholder doesn't resize. Sidebars have fixed width and center is supposed to take the remaining space, however if sidebar width is increased, center placeholder remains fixed width (it should decrease) and sidebar has no other choice but to grow off-screen.

display: none; works for him because he applies it to simplebar class and it gets applied to center placeholder as well. Only center placeholder needs it to get rid of the bug (as shown in my example).

But I don't know, maybe I misunderstood it. That's why demo would have been nice. Good luck!

[Grsmto]

@adjourn yeah you're right actually! Thanks for your help.

[Grsmto]

Until I figure out a solution for this, best workaround would be to force width: auto on placeholder : .simplebar-placeholder { width: auto!important; }.

[Grsmto]

Should be fixed in [email protected]!