各行に2つのレコードを表示する方法p：dataScroller

Question

jsfプロジェクトでPrimeFacesを使用しています。 p:dataScrollerコンポーネントは、1レコードを1行にまとめます。そして、私は領域を2つの列に分割し、各行に2つのレコードをリストしたいと思います。しかし、私はこの問題について書類を見つけることはできません。 Component link

Answer 1

これはコンポーネントから行うことはできません。たとえば、次のようなオプションはありません。 columns="2"か何かをdatascrollerに設定してください。しかし、生成されたhtmlを見ると、単純に見えました。

<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> 

構造が生成されています。だから私はCSSを少し演じ始めた（最後はJavaScriptとJavaScriptの助けを借りてクライアント側のHTMLとCSS）

そして、私は<ul>を2列に表示する方法について、stackoverflowで検索しました。これには、HTML/CSS Making a list be in rows, 3 boxes per row?を含むいくつかのQ/Aがあります。この場合、これは完全には機能しませんが、私はそれを動作させることができると確信しました。

追加：それは働かせたショーケースオンラインPrimeFacesへ

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

。

使用して31％があなたに3列

を与え、あなたはそれが応答 '（2つのまたは3または4または...列は、画面サイズに応じて）したい場合は、使用

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