Vuebar adds padding-right: 20px instead of width in Safari.

[kirill001]

WHen I open my website on Safari I see extra space on the right side. The reason ispadding-right:20pxand lack of width: (100% - 15px);
In Chrome it works perfectly and there is no rule padding-right:20px but there is width:calc(100% - 15px).
If I change manually these rules in Safari's console (remove padding and add width:calc(100%-15px)) it also works.
How to fix this behavior? Please help.

[DominikSerafin]

Hi @kirill001, I can't reproduce it. Could you provide jsfiddle with minimal reproduction? Without it I'm not able to help you.

Here's good starting point: http://jsfiddle.net/u94ns8jc/1/

[kirill001]

I guess I have found the reason.
If I fill <--el2--> with plain text it works, but If I put there div elements I see extra space.
There is an example https://codepen.io/anon/pen/LOKMog
Here is the screenshot from Safari

And from Chrome

Please help.

[filipenco92]

Hello, how resolve this problem: http://joxi.ru/ZrJk3vxT1y5xjm , I set margin-right: -20px but this is not very good solution!

[DominikSerafin]

Hey @kirill001 @filipenco92, I've just merged a fix for this. Could you confirm that this is fixed now for you in Vuebar v0.0.18?

[scherii]

Hey @DominikSerafin
This fixed it for me, thank you very much! 🙂

[filipenco92]

@DominikSerafin Hello, I install now vuebar 0.0.18 and tried, but this not fixed it (i test in Chrome): http://joxi.ru/5mdBweKUvg1ggA! maybe i do not understand something, but it should be : http://joxi.ru/1A5GjVEtKYk5Mm, and for this i write to vb-content width: calc(100% + 20px) or for dropdown item margin-right: -20px because vb-content have padding-right: 20px and this padding push overflow but clear space remains! sorry for my bad english :)

[DominikSerafin]

@filipenco92 I think the problem is with margin-right: -20px, try deleting it.

If it wont work, can you provide minimal reproduction of your problem and tell me in which os/browser it doesn't work?

Starting points with Vue+Vuebar:
http://jsfiddle.net/u94ns8jc/1/
https://www.webpackbin.com/bins/-Kyoqtm8CbjpkYegi7mF

[filipenco92]

@DominikSerafin this problem exist in inactive tab, or dropdown, reproduction problem (browser Chrome, os Ubuntu): http://jsfiddle.net/filipenco92/b4u9dxnk/4/ , in first tab width of vb-content is calc(100% + 15px) but in inactive tab width is 100%, and in dropdown also width is only 100%

[DominikSerafin]

@filipenco92 , thank you for the reproduction, now I know now where the problem lies.

It's a little different problem from this one, so I've created new issue for this: #46

[DominikSerafin]

@filipenco92 , investigated it further and it seems it's not a problem with Vuebar, but rather your implementation of these tabs.

You've used jQuery/Bootstrap to implement them instead using Vue state. This way you've forbidden Vuebar to be able to listen to state and DOM updates and it couldn't refresh/initialize properly.

As a workaround for this, you can use public methods to destroy/reinitialize Vuebar on every tab change.
See working demo: http://jsfiddle.net/b4u9dxnk/13/

The workaround is a little messy, but it works. You can improve it from here further.

I've added there refreshScrollbar method which gets called when you click on tabs/dropdown. And it destroys Vuebar instance on specified ref element, and then re-initializes it. It seems like jQuery is actually pretty slow in updating the DOM, so I had to wrap that code in timeout > 200. Otherwise it wasn't working.

[filipenco92]

@DominikSerafin ok, thanks, i tried with bootstrap-vue (https://bootstrap-vue.js.org) he not have jquery and in tabs and dropdown is the same problem, i will use refreshScrollbars!

[kirill001]

@DominikSerafin Perfect! Now it works! Thank you!

[avilesasturias]

Hi,
It was probably asked many times, but whenever the element has padding on it, the browser scrollbar becomes visible?
Is this normal behaviour? jsfiddle