Problem columns in PrimeFaces

Question

Problem columns in PrimeFaces

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am following an example to divide the screen into 3 columns, to my project I added the library of PrimeFaces 6.1, however it does not work for me. Here I leave the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Guardar</title>
</h:head>
<h:body>
    <h:form>
        <div class="ui-g">
            <div style="background-color: green" class="ui-md-4">4</div>
            <div style="background-color: red" class="ui-md-4">4</div>
            <div style="background-color: black" class="md-g-4">4</div>
        </div>
        <div class="ui-g">
            <div style="background-color: yellow" class="ui-g-4">4</div>
            <div style="background-color: blue" class="ui-g-8">8</div>
        </div>
    </h:form>
</h:body>
</html>

primefaces

asked by Luis Pavez 20.06.2017 в 16:47

source

2 answers

Codeigniter transactions with multiple functions Alert Box in ASP.NET C #

score 1 · Answer 1

Well, I have understood you, so that it is of more help, I put the code itself.

<!-- Lo sustituyes por tu body -->
<h:body>
    <h:form>
        <p:layout fullPage="true">
            <!-- 3 partes verticales(Oeste, Centro y Este) -->           
            <p:layoutUnit position="west" size="33%">
                <p:outputLabel value="Mi parte Oeste" />
            </p:layoutUnit>

            <p:layoutUnit position="center" size="33%" styleClass="tu-clase-css">
                <p:outputLabel value="Mi parte Centro" />
            </p:layoutUnit>

            <p:layoutUnit position="east" size="33%">
                <p:outputLabel value="Mi parte Este" />
            </p:layoutUnit>

        </p:layout>
    </h:form>
</h:body>

score 0 · Answer 2

What you happen to be is that you are using the DIV tag to make columns. Since you are using primefaces there is an element called panelGrid which allows you to generate a table where you specify the number of columns you will use:

<h3>Responsive</h3>
<p:panelGrid columns="3" layout="grid">            
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 

    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 

    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
</p:panelGrid>

With everything I attached the link to element , and if you like you could review more of them that can help you in your development. Greetings.