The jquery.jcarousel.js requires that the item be displayed to set the offsetHeight property to ultimately figure out how large the clip should be. When it is set to 'display:none,' as a tab, the carousel will not dispaly until the browser window is altered, for example, by changing the size of the window. Any suggestions on this would be helpful.

Comments

Equinger’s picture

Equinger commented

Ok, this was a mysterious issue to me, but the solution is really simple. The css for hiding tabs should not be "display:none," but it should be the following. That way height is determined regardless of whether it is shown or not.

.ui-tabs .ui-tabs-hide {
    visibility: hidden !important;
}
commanderflash’s picture

commanderflash commented

Is this in reference to placing jcarousel in quicktabs? I have an issue where the jcarousel in the first tab works correctly, but none of the rest of them in the other tabs work correctly. The styles are not applied to them and it is placing the carousel items vertically, one on top of the other. I do not have the vertical type checked. It appears it is not able to calculate the width of the carousel. If this is indeed the fix, which css file does this need to go in?

quicksketch’s picture

quicksketch
he/him
commented

I'm not sure visibility: hidden is really the right way to go. You're right in that it makes the element retain its height/width so its size can be calculated, but doesn't this make it so that the element continues to take up space on the page when it's not shown? I would expect this would cause a large white-space area below your tabs. I haven't actually tried it out.

If this is indeed the fix, which css file does this need to go in?

It sounds like the suggestion was to modify the CSS included with jQuery UI itself, but I'd probably recommend just putting it in style.css in your theme so you don't have to modify jQuery UI's code (making it easier to upgrade in the future).

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (duplicate)

Let's merge with #642498: jCarousel inside collapsed fieldsets render incorrectly, which is the exact same problem.

calefilm’s picture

calefilm commented

Hi commanderflash. How did you resolve your particular issue? I have the same problem and just posted on the duplicate thread but would rather seek your attention on this if you have any plausible fix. Thanks

simone960’s picture

simone960 commented

Me too, like #2 Commanderflash explained....

jcarousel in the first tab works correctly, but none of the rest of them in the other tabs work correctly. The styles are not applied to them and it is placing the carousel items vertically, one on top of the other.

But my case only happened in IE7, the rest are works ok. I am using other jquery tabs. I have also tried several other tabs, one cause same problem in IE 9 but not others, the other caused same problem in IE7 but not with others.... Without using the tabs, all works perfectly. Really headache with IE.... any insight??

commanderflash’s picture

commanderflash commented

@ calefilm, I never did find a solution to this. I just implemented my site without it.