2

I am using t:datalist with JSF 2.0 to allign images horizontally . But i would like to list the properties of each image below the image vertically.Now the properties are also listed horizontally along with images. The code i use is :

    <t:dataList var="item" value="#{listItems.dataList}" id="listItems"> 
                        <h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
                        <h:outputText value="#{item.prodName}" />
                        <h:outputText value="#{item.prodPrice}" />
            </t:dataList>

I am not able to use plain html table tag inside the datalist to list the name and price properties below the image. Found a tag named f:verbatim after some search , but i could not make it work either. Tried putting the html table tag inside a panelGroup too.

maya
  • 159
  • 1
  • 17

1 Answers1

2

Wrap them in a left-floating <div> and put the lines below the image by <br>.

<t:dataList var="item" value="#{listItems.dataList}" id="listItems"> 
    <div class="box">
        <h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
        <br /><h:outputText value="#{item.prodName}" />
        <br /><h:outputText value="#{item.prodPrice}" />
    </div>
</t:dataList>

With for example this CSS

.box {
    float: left;
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
}

Only make sure that you've a clear: left; on the containing element so that floats don't go beyond the container.

Unrelated to the problem, please keep in mind that <f:verbatim> is deprecated in JSF 2. You should not use it anymore. You also do not need it anymore. In JSF 1.0/1.1 that tag was mandatory in order to be able to use plain HTML tags in a JSF page. Since JSF 1.2 it is not mandatory anymore. You can just inline HTML tags in a JSF page there where you want without fiddling with <f:verbatim>.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • This displays the images also vertically like an unordered list layout. I need to display the images somewhat like those in http://www.perfume2order.com/Products/Men.html , with the name and price just below each image. – maya Sep 20 '11 at 12:46
  • Ah right, add some CSS to control the style. I edited the example. – BalusC Sep 20 '11 at 13:35
  • Thank you.This works.I would like to have an additional information related to this context. I have some products with no images and those appear tiny .Which component can i insert to have fixed size boxes even if there is no image ? – maya Sep 20 '11 at 14:30
  • Give the `
    ` a fixed `width` and `height` in CSS. E.g. add `width: 200px; height: 300px;` to `.box {}` or something. I suggest to invest some time in learning CSS: http://www.csstutorial.net/
     – BalusC Sep 20 '11 at 14:33
  • @BalusC, Dude your JSF knowledge is legend! – n4rzul Sep 12 '13 at 21:30