2

I am trying to layout a page with Bootsfaces and JSF 2.2. I like to show only three column in a row and then start new row but don't know, how to implement this. 

<h:form>
    <b:container>
        <b:row>
        <ui:repeat value="#{ClientBean4.custs}" var="custs">
            <b:column col-md="4"><h:outputText id="output" value="#{ClientBean4.counter}" /> </b:column>
            <h:panelGroup rendered="#{ClientBean4.counter == 0}">
                </b:row><b:row>
            </h:panelGroup>
        </ui:repeat>
        </b:row>
    </b:container>
</h:form>

after a long time, I wrote above code, but it's givng error like 'h:panelgroup' should be properly closed. It's giving meaning, that I started panelGroup and then closing a row, starting a new row, and then close panelGroup.

So, Is anyone have idea, how to implement a layout, where a row will have three columns (showing customer's object details per column), then close the row and start a new row. obvisouly, I dont know, how many objects will be in the list.

Adam Waldenberg
  • 2,271
  • 9
  • 26
Mr. Learner
  • 351
  • 1
  • 2
  • 12
  • 1
    Please give us some more information. Do you mean a new row should be created when the user presses a button? If not, what should trigger this? Or do you want to replace a certain row with certain information with something else ? Depending on what you are after here, there are a number of ways to go about it. – Adam Waldenberg Jan 09 '19 at 04:59
  • 1
    Now I understand. Let me write up an answer... – Adam Waldenberg Jan 09 '19 at 08:43
  • 1
    @AdamWaldenberg: If you read https://stackoverflow.com/help/tagging and then especially the title part, you can use that info to edit the questions and get additional reputation for each accepted edit. – Kukeltje Jan 09 '19 at 09:27
  • From a technical point of view, you don't have to put each row in a ``. Bootstrap automatically "overflows" the columns into the next row. – Stephan Rauh Jan 09 '19 at 19:26

1 Answers1

4

BootFaces offers a component that handles this. More specifically you can use <b:panelGrid columns="3"> to achieve this. This will give you a dynamic grid system that will grow vertically as you populate it but retain the number of rows that you specify.

You can see the component in action here, https://showcase.bootsfaces.net/layout/panelgrids.jsf

PrimeFaces also has a component for this, but I assume you want to use BootFaces as your original code uses it. If you prefer PrimeFaces, you can use the <p:dataGrid> component, which does something similar. This component even handles pagination.

Adam Waldenberg
  • 2,271
  • 9
  • 26
  • 2
    It might be 'better' to use grid css with plain divs or whatever so you get responsiveness out of the box. Oh wait, I now see that BootsFaces has this built-in. I don't think PrimeFaces has – Kukeltje Jan 09 '19 at 09:37
  • 1
    Yes, this component will produce a normal Bootstrap grid using divs. Consequiently, it even supports the usual style classes to control it's behavior on different resolutions. – Adam Waldenberg Jan 09 '19 at 09:40
  • 1
    My pleasure @Mr.Learner. – Adam Waldenberg Jan 09 '19 at 18:11
  • 1
    @Kukeltje, Most PrimeFaces components are actually fully responsive and support mobile - this is something the development team has been working on since a couple of releases back. – Adam Waldenberg Jan 09 '19 at 18:13
  • 1
    I know: https://forum.primefaces.org/memberlist.php?mode=viewprofile&u=4569, ;-) but not enough (no disqualification, just an observation). I unfortunately did not have the time to create patches. Might change in de not too distant future. – Kukeltje Jan 09 '19 at 19:15