For some reason Google Chrome is not displaying the first column of a multi-row YUI Carousel control. It works for me using IE and Firefox but not Chrome.

Any ideas how I can rectify or troubleshoot the problem?

EDIT: Upon further inspection it seems that it the whole div containing the carousel has the control centered within it, causing in actual fact, the third column to be invisible.

EDIT2: Turns out its a bug in the carousel with webkit browsers. I have made a thread on the YUI forums regarding it.

2 answers

danwellman 5600

Are you able to fix the centering by overriding style declarations? I've worked with YUI Carousel a few times and never had this problem before. Can you disable the style using the web-inspector to see if it fixes the problem? If this is not possible with web-inspector (I don't use it in development) you could try firebug lite to debug it?

If it does you could just out-specificy the underlying YUI style that is cauing it (begin the original selector with an id selector for example to give it more weight)

Answered over 9 years ago by danwellman
  • Thanks. I have discovered that it is a webkit bug and made a thread on the official forums which I have linked to above. Simon Hartcher over 9 years ago

My current solution is to wait until the carousel is loaded and then adjust the width to the right value:

if (YUI().UA.webkit) {
   featureEventsCarousel.addListener("show", fixWebKitBrowserCarouselWidth);

var fixWebKitBrowserCarouselWidth = function() {
    var div = $('featureEvents').getChildren("div", null).getNext()[0];
    var width = window.getComputedStyle(div,null).width;
    if (width > "564px") {
        div.setStyle('width', 564);

Its a bit hacky but works for now...

Answered over 9 years ago by Simon Hartcher