Doesn't work properly with transitions

[nicolasvahidzein]

Hello, let me start by saying i loved how beautiful your component is and i cant wait to see it live in my test project.

This isn't an issue but more my lack of knowledge on how to implement it. I added the npm package and i initialized it in my main class as you instructed us on the main page but nothing is working. I am not seeing the scrollbar show up.

Do you by any chance have a sample project using the scrollbar i can test? Thank you sir.

[DominikSerafin]

Hello @nicolasvahidzein, thank you for good words 👍

You need to do 3 things to see the scrollbar:

1. Install it and include in your code (https://github.serafin.io/vuebar/#installation)
2. Use proper markup on the element where you want your scrollbar to be applied (https://github.serafin.io/vuebar/#usage)
3. Style the scrollbar any way you want (https://github.serafin.io/vuebar/#styling)

I hope this helps

[nicolasvahidzein]

Hello Dominik, thanks for your help, i guess i had to had the styling otherwise it was not working.
Thanks.

Now i get this error when i place your scrollbar inside a div that i hide using v-show:

------------------------------------------------------------------------------------
vue.esm.js?65d7:434 [Vue warn]: Error in directive bar unbind hook: "TypeError: Cannot read property 'dragger' of undefined"

found in

---> <CreateIndividual> at D:\WebServer\ZeinTekWebServices\liveroot\merlin-silverbullet\src\pages\CreateIndividual.vue
       <App> at D:\WebServer\ZeinTekWebServices\liveroot\merlin-silverbullet\src\App.vue
         <Root>


-------------------------------------------------------------------------------------

vue.esm.js?65d7:523 TypeError: Cannot read property 'dragger' of undefined
    at destroyScrollbar (eval at <anonymous> (app.js:2109), <anonymous>:552:18)
    at unbind (eval at <anonymous> (app.js:2109), <anonymous>:780:34)
    at callHook$1 (eval at <anonymous> (app.js:729), <anonymous>:5488:7)
    at _update (eval at <anonymous> (app.js:729), <anonymous>:5452:9)
    at updateDirectives (eval at <anonymous> (app.js:729), <anonymous>:5394:5)
    at Array.unbindDirectives (eval at <anonymous> (app.js:729), <anonymous>:5388:5)
    at invokeDestroyHook (eval at <anonymous> (app.js:729), <anonymous>:5030:64)
    at removeVnodes (eval at <anonymous> (app.js:729), <anonymous>:5045:11)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:729), <anonymous>:5370:11)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:729), <anonymous>:2324:19)
------------------------------------------------------------------------------------

[DominikSerafin]

Thanks @nicolasvahidzein! It seems there might be a bug with v-show. I'll look into it as soon as possible.

[DominikSerafin]

Hey @nicolasvahidzein

I've looked into the issue and I couldn't reproduce it.

I've tried with v-show and v-if on different elements (wrapper, el1, el2) and no luck.

Nevertheless I've added additional safeguard (9424c43) on destroyScrollbar method with which the VueBar hopefully won't throw an error.

Meanwhile - could you provide some more info about the environment and the code with which you encountered this issue?

Thanks!

[nicolasvahidzein]

So first off please forgive me i'm not an experienced coder like you this file is pretty long but a lot of it you can delete, the important portion is on top anyway in the template section.

I am sending you everything because if i delete something maybe that is what is messing up the code. Alos you can Teamviewer to my computer if you can't reproduce it.

here goes: https://www.dropbox.com/s/n8e56j2f4t16lmj/CreateIndividual.vue?dl=0

[DominikSerafin]

Hey @nicolasvahidzein thanks for providing the full component. This problem is actually because of <transition>.

You can quickly fix that by wrapping your "slideoutpanel" element in another element and use transition and v-if on it. Like so:

<transition name="fade">
<div v-if="show">
	<div class="slideoutpanel el1" v-bar>
		<div id="slideoutpanelcontainer" class="el2">

		...

Or more drastic measure - you can completely remove transition.

[DominikSerafin]

The actual problems with VueBar and transitions:

1. VueBar doesn't initialize at all if the el1 is directly wrapped in transition.
2. If VueBar el1 is wrapped in element that is transitioning then it flashes el2 content (because of overflow: visible) on unbind. It's because it destroys itself on transition start instead of transition finish.

[DominikSerafin]

@nicolasvahidzein this should be now fixed with 0.0.13. Could you confirm this works for you also?

[nicolasvahidzein]

It does indeed, i place it inside another div and all is PERFECT. You are quite wonderful. Your scrollbar is super beautiful!!!

[foxyntax]

Hi @DominikSerafin

Does vuebar work in Vue CLI3.0.7?or just in vue 2?
I have a Nicolas's issues and it doesn't work for me....