Vuebar adds padding-right: 20px instead of width in Safari.
kirill001 opened this issue · 13 comments
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.
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/
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.
Hello, how resolve this problem: http://joxi.ru/ZrJk3vxT1y5xjm , I set margin-right: -20px but this is not very good solution!
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?
Hey @DominikSerafin
This fixed it for me, thank you very much! 🙂
@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 :)
@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
@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%
@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
@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.
@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!
@DominikSerafin Perfect! Now it works! Thank you!
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