How to show two records on each row p:dataScroller

Question

I use PrimeFaces in my jsf project. The p:dataScroller component lists one record to one row. And I want to split area two column and list two record each row. But I can not find any documentation this issue. Component link

Answer 1

You cannot do this from the component. There is no option to e.g. configure columns="2" or something on the datascroller. But when I looked at the generated html, I saw a simple

<ul class="ui-datascroller-list">
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
</ul>

structure being generated. So I started playing a little with the css (in the end, it is always html and css on the client side with the help of javascript)

And So I searched in stackoverflow on how to display an <ul> in two columns. There are several Q/A on this, including HTML/CSS Making a list be in rows, 3 boxes per row?. This does not fully work in this case, but it made me confident I could get it to work, and I did.

Adding:

.ui-datascroller .ui-datascroller-item {
    width: 48%;
    display: inline-block;
}

to the online PrimeFaces showcase made it work.

Using 31% gives you 3 columns

And if you want it 'responsive' (2 or 3 or 4 or... columns depending on screen size), use

Media Queries: How to target desktop, tablet and mobile?