How do I display data in horizontal orientation in JSF as repeater in Asp.Net?

Question

I saw datatable component in JSF and it typically renders as table row by row. But what do I do if I want to display something not in vertical orientation but in horizontal manner? Say, suppose I want to make a photo album so I need to be able to display rows of database table in column format.

Answer 1

Make use of another UIData based component wherein you have full control over the output, such as Facelets' ui:repeat, Tomahawk's t:dataList or RichFaces' rich:dataList or a4j:repeat.

E.g.

<ul>
    <ui:repeat items="#{bean.photos}" var="photo">
        <li><img src="#{photo.url}" alt="#{photo.title}" /></li>
    </ui:repeat>
</ul>

in combination with for example

li { 
    display: inline;
    list-style-type: none;
}

The t:dataList and rich:dataList can render <ul> and <li> for you. You just have to print the <img> (or h:graphicImage if you prefer that) and apply a shot of CSS.

Update: as a bonus and as horizontally scrolling the page is generally bad for UX, you'd like to make it a carousel. Just style the <ul> element as follows then:

ul {
    width: 500px; /* Just pick whatever width it needs to be. */
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: none;
}