Space between columns in theGrid panel

1

I have 4 columns, and I want the last 2 more separated from the first. I can not. anyone help?

Code:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!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:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

         <link rel="StyleSheet" type="text/css" href="css/estilos.css" media="screen" />

        <title>Tela</title>
    </h:head>
    <h:body>
        <h:form>
            <p:panel header="Calcular IV's" >
            <h:panelGrid columns="4" >
            <p:outputLabel value="Pokémon" for="pokemon"/>
            <p:selectOneMenu id="pokemon"/>
            <p:outputLabel id="a" value="Nature" for="nature"/>
            <p:selectOneMenu id="nature"/>
            </h:panelGrid>

            </p:panel>
        </h:form>
    </h:body>
    </html>
    
asked by anonymous 17.09.2015 / 19:11

1 answer

1

Use the columnClasses attribute to reference your css classes.

<h:panelGrid columns="4" columnClasses="col1, col2, col3, col4">
    <p:outputLabel value="Pokémon" for="pokemon" />
    <p:selectOneMenu id="pokemon" />
    <p:outputLabel id="a" value="Nature" for="nature" />
    <p:selectOneMenu id="nature" />
</h:panelGrid>


<style>
    .col1 {         
    }

    .col2 {
        width: 100px;
    }

    .col3 {         
    }

    .col4 {         
    }
</style>
    
18.09.2015 / 17:04