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 almost 10 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 almost 10 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 almost 10 years ago by Simon Hartcher