<p:carousel> issues

[bardu]

It seems floating elements inside <p:carousel> doesn't has the desired effect. Here is my code:

Code: Select all

<ui:define name="dialogs">
        <p:dialog  header="#{msgs.wildlife_viewing_sidebar_wildlife}" modal="true" widgetVar="dlg1" showEffect="explode" hideEffect="explode" width="500" height="500" resizable="false" >
            <p:carousel rows="1" first="#{wildlifeViewingBean.first}" var="wl" itemStyleClass="wildlife-carousel-item" value="#{wildlifeViewingBean.wildlife}" >
                <h:panelGrid columns="1" style="width:100%" cellpadding="5">
                    <h:panelGrid style="text-align: left; font-weight: bold; color: orange;" >
                        <h:outputText value="#{wl.name}" escape="false" style=" " />
                    </h:panelGrid>
                    <h:panelGrid style="width: 100%; text-align: justify;">
                        <img alt="Could not load image!" src="#{wl.imageLink}" style="float: right" />
                        <h:outputText value="#{wl.yukonDesc}" escape="false"  />
                    </h:panelGrid>
                </h:panelGrid>
            </p:carousel>
        </p:dialog>
    </ui:define>

Also, I have currently 34 items in the carousel and the left navigation icon is rendered twice as it can be seen here:

http://a.imageshack.us/img204/770/screenshot26u.png

[cagatay.civici]

I couldn't understand the issue, so effect doesn't work?

[bardu]

Well, the <img> is floated to the right, but the outputText is not wrapped around it as you can see in the above attached screenshot.