CODEWITHSUNDEEP
jsfprimefacescarouseljsf-2.2
Demonblack
Demonblack

Reputation: 394

Primefaces - p:carousel completely broken in both Chrome and Internet Explorer

I'm trying to implement a p:carousel in my page.

It is, however, completely broken.

I'm running Primefaces 5 and JSF2.2 on Tomcat 7.0.52 and I tried it in both Chrome and Internet Explorer 8.

I tried downgrading from Primefaces 5.0 to 4.0, and it made no difference whatsoever. Wrapping it in an <f:view contentType="text/html"> didn't either.

What baffles me is that the example on the official primefaces site works brilliantly.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>title</title>
    </h:head>

    <body>
        <p:carousel >
            <p:graphicImage value="/images/cloudy.png" />
            <p:graphicImage value="/images/rainy.png" />
            <p:graphicImage value="/images/logo.gif" />
            <p:graphicImage value="/images/redball.png" />
            <p:graphicImage value="/images/yellowball.png" />
            <p:graphicImage value="/images/greenball.png" />
        </p:carousel>
    </body>
</html>

Not exactly rocket science eh?

UPDATE:

Apparently, the problem was that not all of my images were of the same size. Specifically, they're all 48x48 except logo.gif which is 300x111. Moving the images around so that logo.gif is the first one seems to have sort of fixed it: now the carousel takes 300x111 as the size of each component and shapes accordingly. Giving the images a fixed sizes also works.

My problem now is another one: i'm using the carousel to display components that do not have a fixed size (<p:chart>) and it breaks again. If i wrap them in a <p:panel> and give the panel a fixed size it works once more, however the fixed size is fugly and unacceptable (it ruins the whole styling of the application).

Is there any way around this?

Upvotes: 2

Views: 1012

Answers (2)

Demonblack
Demonblack

Reputation: 394

I ended up solving it in the end. As it turns out, p:carousel needs a fixed width for its elements.

By manually setting it to 400 pixels wide and 400 pixels high it started working again.

I think the tag's attribute was "itemStyle" (or "itemStyleClass" if you wanted to use a class), but I am not 100% sure (it was a long time ago).

Just thought I'd share the solution in case someone else runs into the same issue.

Upvotes: 2

LarsBauer
LarsBauer

Reputation: 1535

Try this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>title</title>
    </h:head>
    <h:body>
        <p:carousel >
            <p:graphicImage value="/images/cloudy.png" />
            <p:graphicImage value="/images/rainy.png" />
            <p:graphicImage value="/images/logo.gif" />
            <p:graphicImage value="/images/redball.png" />
            <p:graphicImage value="/images/yellowball.png" />
            <p:graphicImage value="/images/greenball.png" />
        </p:carousel>
    </h:body>
</html>

I recognized PrimeFaces 5.0 doesn't work well if you use <body> instead of <h:body>. Also make sure that the value attribute of <p:graphicImage> points to the right directory.

Upvotes: 0

Related Questions