Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.
Other
603
stars
259
forks
source link
Chrome issue with EqualHeight and NiceScroll combined #39
I have an issue when I use NiceScroll and a custom EqualHeight plugin to make the list (verticalTab) and the container of equal height. Chrome isn't giving me my equal height when there's more than one verticalTab with NiceScroll integrated.
See my detailed description below and demos. Do you have any suggestions on the issue?
This concept has each of the “.resp-tabs-container” configured to have overflow:auto and the height of the container to match that of the “.resp-tabs-list” on the left for the VerticalTab. That way when more lists are added then the height of the container will always have equal height to the list on the left. Testing this within Firefox, Safari and IE works great, but Chrome has an issue when using NiceScroll plus my EqualHeight plugin when there's more than one VerticalTab.
Scenario 1: When using Chrome (mac or windows) the EqualHeight works only when I resize my browser window just a little bit with NiceScroll integrated. In my demo, resize the column in the middle while using Chrome to see the EqualHeight snap into place. Note: It would be great to not have to resize the browser for the equal height to snap into place.
Demo: http://jsfiddle.net/RTAT5/3/
Scenario 2: Should I remove NiceScroll then EqualHeight works great with Chrome without resizing the browser! Note: It would be preferred not to have to remove NiceScroll.
Demo: http://jsfiddle.net/RTAT5/4/
Scenario 3: Meanwhile, with NiceScroll integrated and there's only one “verticalTab” instead of two verticalTabs then Chrome shows equalHeight without resizing my browser window. Note: This is the preferred option, because everything is working, but I'm limited to only one verticalTab per page.
Demo: http://jsfiddle.net/RTAT5/6/
Update I figured out when I have more than one "verticalTab" and I use this plug-in Chrome doesn't play nicely when this is used to style the scrollbar automatically with niceScroll
$(".resp-tabs-container").niceScroll({
cursorcolor:"#d5dcdd",
cursorwidth:7,
autohidemode:false,
cursorborderradius:0,
background:"#eceeef",
cursorborder:0
}).resize();
However if I use just this plug-in so scrollbar only gets styled on mouseover then there's no issue, but then the user is shown an unstyled scrollbar until they mouse over. Note: I know I can use overflow:hidden to hide the scrollbar until the user hovers over the content, but this is not ideal.
$(".resp-tabs-container").mouseover(function() {
$(".resp-tabs-container").niceScroll({
cursorcolor:"#d5dcdd",
cursorwidth:7,
autohidemode:false,
cursorborderradius:0,
background:"#eceeef",
cursorborder:0
}).resize();
});
Demo of this update (use Chrome): http://jsfiddle.net/RTAT5/7/
I hope my code, description and demos were helpful!
I have an issue when I use NiceScroll and a custom EqualHeight plugin to make the list (verticalTab) and the container of equal height. Chrome isn't giving me my equal height when there's more than one verticalTab with NiceScroll integrated.
See my detailed description below and demos. Do you have any suggestions on the issue?
This concept has each of the “.resp-tabs-container” configured to have overflow:auto and the height of the container to match that of the “.resp-tabs-list” on the left for the VerticalTab. That way when more lists are added then the height of the container will always have equal height to the list on the left. Testing this within Firefox, Safari and IE works great, but Chrome has an issue when using NiceScroll plus my EqualHeight plugin when there's more than one VerticalTab.
Scenario 1: When using Chrome (mac or windows) the EqualHeight works only when I resize my browser window just a little bit with NiceScroll integrated. In my demo, resize the column in the middle while using Chrome to see the EqualHeight snap into place. Note: It would be great to not have to resize the browser for the equal height to snap into place. Demo: http://jsfiddle.net/RTAT5/3/
Scenario 2: Should I remove NiceScroll then EqualHeight works great with Chrome without resizing the browser! Note: It would be preferred not to have to remove NiceScroll. Demo: http://jsfiddle.net/RTAT5/4/
Scenario 3: Meanwhile, with NiceScroll integrated and there's only one “verticalTab” instead of two verticalTabs then Chrome shows equalHeight without resizing my browser window. Note: This is the preferred option, because everything is working, but I'm limited to only one verticalTab per page. Demo: http://jsfiddle.net/RTAT5/6/
Update I figured out when I have more than one "verticalTab" and I use this plug-in Chrome doesn't play nicely when this is used to style the scrollbar automatically with niceScroll $(".resp-tabs-container").niceScroll({ cursorcolor:"#d5dcdd", cursorwidth:7, autohidemode:false, cursorborderradius:0, background:"#eceeef", cursorborder:0 }).resize();
However if I use just this plug-in so scrollbar only gets styled on mouseover then there's no issue, but then the user is shown an unstyled scrollbar until they mouse over. Note: I know I can use overflow:hidden to hide the scrollbar until the user hovers over the content, but this is not ideal.
$(".resp-tabs-container").mouseover(function() { $(".resp-tabs-container").niceScroll({ cursorcolor:"#d5dcdd", cursorwidth:7, autohidemode:false, cursorborderradius:0, background:"#eceeef", cursorborder:0 }).resize(); }); Demo of this update (use Chrome): http://jsfiddle.net/RTAT5/7/
I hope my code, description and demos were helpful!