css - columnclasses - Cómo eliminar el límite de PrimeFaces específico p: panelGrid?

panelgrid primefaces

Question

Tengo dificultades para eliminar el borde de un PrimeFaces específico <p:panelGrid> .

<p:panelGrid styleClass="companyHeaderGrid">
<p:row>
<p:column>
Some tags
</p:column>
<p:column>
Some tags
</p:column>
</p:row>
</p:panelGrid>

Pude eliminar el borde de las celdas con:

.companyHeaderGrid td {
border: none;
}

Pero

.companyHeaderGrid {
border: none;
}

No funciona.

Answer 1

Como mencionó BalusC, PrimeFaces establece el límite en los elementos tr y td generados, no en la table . Sin embargo, al intentar con PrimeFaces versión 5, parece que hay una coincidencia más específica del PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid que aún da como resultado que se muestren los bordes negros al aplicar el estilo sugerido.

Intente usar el siguiente estilo para sobreponer el primero sin usar la declaración !important :

.companyHeaderGrid tr, .companyHeaderGrid td.ui-panelgrid-cell {
border: none;
}

Como mención, asegúrese de que su CSS esté cargado después del de PrimeFaces .

Answer 2

El borde se ha establecido en los elementos tr y td generados, no en la table . Entonces, esto debería hacer:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell {
border: none;
}

¿Cómo lo encontré? Simplemente verifique la salida HTML generada y todas las reglas de estilo CSS en el conjunto de herramientas del desarrollador web de Chrome (haga clic con el botón derecho, Inspeccione el elemento o presione F12). Firebug e IE9 tienen un conjunto de herramientas similar. En cuanto a la confusión, solo tenga en cuenta que JSF / Facelets finalmente genera HTML y que CSS solo se aplica en el marcado HTML, no en el código fuente JSF. Entonces, para aplicar / finetune CSS, debe buscar en el lado del cliente (webbrowser).

Ver también:

• ¿Cómo anulo el PrimeFaces CSS predeterminado con estilos personalizados?
• Eliminar borde de todos los componentes PrimeFaces p: panelGrid

Si todavía tienes PrimeFaces 4 o más, usa a continuación:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
border: none;
}

Answer 3

En la actualidad, Primefaces 5.x tiene un atributo en panelGrid llamado "columnClasses".

.no-border {
border-style: hidden !important ; /* or none */

} Entonces, a un panelGrid con 2 columnas, repita dos veces la clase css.

<p:panelGrid columns="2" columnClasses="no-border, no-border">

Para otros elementos, lo feo "! Importante" no es necesario, pero a la frontera simplemente funciona bien para mí.

Answer 4

Esto funcionó para mí:

.ui-panelgrid td, .ui-panelgrid tr { border-style: none !important }

Answer 5

Estoy usando Primefaces 6.0 y para eliminar los bordes de mi cuadrícula del panel, utilizo esta clase de estilo "ui-noborder" de la siguiente manera:

<p:panelGrid columns="3" styleClass="ui-noborder">
<!--panel grid contents -->
</p:panelGrid>

Utiliza un archivo css llamado "components" en primefaces lib

Answer 6

Para que los temas tradicionales y modernos no tengan borde, aplique lo siguiente;

<!--No Border on PanelGrid-->
<h:outputStylesheet>
.ui-panelgrid, .ui-panelgrid td, .ui-panelgrid tr, .ui-panelgrid tbody tr td
{
border: none !important;
border-style: none !important;
border-width: 0px !important;
}
</h:outputStylesheet>

Answer 7

Por favor, intente esto también

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

Answer 8

Si encuentra una línea entre las columnas, utilice el siguiente código,

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td{
border: hidden;
border-color: white;
}

Lo comprobé con Primefaces 5.1

<h:head>
<title>Login Page</title>
<h:outputStylesheet library="css" name="common.css"/>
</h:head>
<p:panelGrid id="loginPanel" columns="3" styleClass="panelNoBorder">
<p:outputLabel value="Username"/> <p:inputText id="loginTextUsername"/>
<p:outputLabel value="Password"/> <p:password id="loginPassword"/>
<p:commandButton id="loginButtonLogin" value="Login"/> <p:commandButton id="loginButtonClear" value="Clear"/>
</p:panelGrid>

Answer 9

Si la respuesta de BalusC no funciona, intente esto:

.companyHeaderGrid td {
border-style: hidden !important;
}

Answer 10

Si solo quieres algo más simple, solo puedes cambiar:

<p:panelGrid >
</p:panelGrid>

a:

<h:panelGrid border="0">
</h:panelGrid>

Eso funcionó bien para mí

Answer 11

Solo agregue esas líneas en su css personalizado mycss.css

table tbody .ui-widget-content {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 solid #FFFFFF;
color: #333333;
}

Answer 12

Tratar

<p:panelGrid styleClass="ui-noborder">

Answer 13

Utilice la modificación de estilo a continuación para eliminar el borde del botón de opción Primefaces

.ui-selectoneradio td, .ui-selectoneradio tr
{
border-style: none !important
}

Answer 14

para mí solo funciona el siguiente código

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
border-width: 0
}
<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>