Views Carousel in hidden div

can you switch the quicktab to non-ajax mode?

can you attach a screenshot?

can you reproduce the problem on test data and attach a screenshot?

so, the carousel does not work in ajax mode as it requires additional css or js files #345175: what could be inside ajax quicktabs

can I see the problem in non-ajax mode?

the quicktab is still in ajax mode..

the quicktab is still in ajax mode..

the problem seems to be similar as the gmap problem. The content is misaligned in hidden tab.

if you try http://d6.luco.com.br/node?quicktabs_1=1 then you can see that the second tab is ok and the first tab (the hidden tab) is wrong..

please try the 6.x-2.x-dev release with this modification in your theme's css file: #352247-12: Gmap centering has error on hidden Quicktab tabs (was: How to display two gmaps properly)

Hi Pasqualle,

I'm having the same problem. Maybe you can help me. You can go to http://CinemaSaville.com, and see that on the first tab the carousel, but when you try to go to the 2nd tab, it's not functioning properly. I downloaded the 6.x-2x-dev release, and added the extra css to my theme, but it still isn't working. It's a non-AJAX qt. Any help would be appreciated, I love your QuickTabs, now if only we can get this working. Thanks again. Best, Jeremy

@CinemaSaville:
one problem is you are using the block tab type. When you want to add a view into quicktab use the view tab type.
The second problem is that I do not see any sign of carousel in the second and additional tabs. Might be a result of the first problem, but also make sure that you are using the correct settings in the views to display the result as carousel.

I changed all the quicktabs to views tab type. And I'm still having the same problem. Take a look now.

It is much better now as the carousel and all the view items are there, but now you have a problem with positioning.
As I see you are using the quicktabs dev version. I do not know what else should you try, it really seems like a positioning problem in the jquery used in views carousel.

Any idea from Views carousel maintainers or users?

Well I put it into AJAX mode, so you can at least see the items. Otherwise they were completely obscured. So this is a temporary fix. I posted an issue over there, but no one has piped up. I found this issue here, so I thought you might be able to help. The carousel works with only the first tab. Are you sure it's a views carousel issue, and not a QuickTabs one? Just hard to figure out where the problem is. Thanks again for your quick response. And thanks again for the great module.

@CinemaSaville: As I saw earlier you did not make the change described in this comment: #352247-12: Gmap centering has error on hidden Quicktab tabs (was: How to display two gmaps properly)
without it the position can not work in hidden tab..

Pasqualle: I put in the CSS you recommend in that queue, cleared the cache, but still had the same trouble. Is there something else I need to do other than that?

@CinemaSaville: you must have made an error in the css change as I see this in my firebug:

.quicktabs-hide {
}

.quicktabs-hide {
  display:none;
}

I was putting that in my theme CSS instead of the quicktabs CSS. And then I took it off AJAX. So now it works, and all is well with the world. Great job on getting me through that, Pasqualle. Thanks so much.

I have two tabs, each tab points to a views block that is a views carousel view.

The first one seems to load, but the second one does not.

I also get the error "jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..."

I tried the fix above, putting it in my quicktab CSS, the quicktab style (sky) css, and my theme (garland) css, and it does not fix the issue.

I still get the error message.

@cookiesunshinex: are you using the 6.x-2.x-dev version?

@Pasqualle - Oops, sorry, I was using the 6.x-2.0-rc3 version.

After I installed the latest Dev version and added the following code per the link above to sites\all\modules\quicktabs\css\style.css

.quicktabs-hide {
  position: absolute;
  left: -10000px;
  top: -10000px;
}

All seems to be working well now.

Thanks!

actually it would be better if you could add it to the theme's css as you do not have to change it again when you update the module..
maybe for the correct functionality you will have to add also

  display: block;

@Pasqualle, I had already added it to my theme, see comment #23 above.

I will try removing it from sites\all\modules\quicktabs\css\style.css and adding the display: block like below to garland's style.css

.quicktabs-hide {
  position: absolute;
  left: -10000px;
  top: -10000px;
  display: block;
}

@Pasqualle, just reporting that this does work if I remove it from sites\all\modules\quicktabs\css\style.css and add it only to my theme (in my case just using garland).

thanks!!!

Similar problem occurs when using the Jquery Carousel module. The first item works fine, but the rest just show as regular list items. It only works in Ajax mode. In non-ajax module, nothing shows up in any tab but the first.

Inspecting the code, in all tabs but the first, several jquery carousel classes are removed which I guess is why it won't work.

had the same problem. #27 worked for me. But I am also having the same problem on the panels edit page. it is caused by the
display: none on <div class="pane-content" style="display:none"></div>

it is an element style so it cannot be overridden by CSS.

fixed the panels edit by adding

.panel-portlet .pane-content
{ 
  display: block !important;
  position: absolute;
  left: -10000px;
  top: -10000px;
}