Как убрать границу из конкретного PrimeFaces p:panelGrid?

Question

У меня трудности с удалением границ из определенных PrimeFaces <p:panelGrid>,

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

Я был в состоянии удалить границу из клеток с помощью:

.companyHeaderGrid td {
    border: none;
}

Но

.companyHeaderGrid {
    border: none;
}

Не работает.

Answer 1

Граница была установлена ​​на сгенерированном tr а также td элементы, а не на table, Итак, это должно сделать:

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

Как я это нашел? Просто проверьте сгенерированный вывод HTML и все правила стиля CSS в наборе инструментов веб-разработчика Chrome (щелкните правой кнопкой мыши, Inspect Element или нажмите F12). Firebug и IE9 имеют похожий набор инструментов. Что касается путаницы, просто помните, что JSF/Facelets в конечном итоге генерирует HTML и что CSS применяется только к разметке HTML, а не к исходному коду JSF. Таким образом, чтобы применить / отрегулировать CSS, вам нужно смотреть в сторону клиента (веб-браузера).

Смотрите также:

• Как переопределить стандартный PrimeFaces CSS с помощью пользовательских стилей?
• Удалить границы из всех компонентов PrimeFaces p: panelGrid

---

Если вы все еще используете PrimeFaces 4 или старше, используйте ниже:

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

Answer 2

Я использую Primefaces 6.0 и для удаления границ из сетки панели я использую этот класс стилей "ui-noborder" следующим образом:

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

Он использует CSS-файл с именем "компоненты" в Primefaces lib

Answer 3

Это сработало для меня:

.ui-panelgrid td,.ui-panelgrid tr
{
    стиль границы: нет! важно
}

Answer 4

Если ответ BalusC не работает, попробуйте это:

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

Answer 5

Если вы найдете строку между столбцами, используйте приведенный ниже код,

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

Я проверил это с 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 6

Пытаться

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

Answer 7

В настоящее время у Primefaces 5.x в PanelGrid есть атрибут с именем "columnClasses".

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

} Итак, для PanelGrid с 2 столбцами, повторите два раза класс CSS.

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

Другим элементам уродливый "! Важный" не нужен, но для границы просто с этим у меня нормально работает.

Answer 8

Как упомянуто BalusC, граница устанавливается PrimeFaces для сгенерированного tr а также td элементы, а не на table, Тем не менее, при попытке с PrimeFaces версии 5, похоже, что существует более конкретное соответствие из PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid что по-прежнему приводит к появлению черных рамок при применении предложенного стиля.

Попробуйте использовать следующий стиль, чтобы переопределить Primefaces один без использования !important объявление:

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

В качестве упоминания убедитесь, что ваш CSS загружен после PrimeFaces.

Answer 9

Если вы просто хотите что-то более простое, вы можете просто изменить:

<p:panelGrid >

</p:panelGrid>

чтобы:

<h:panelGrid border="0">

</h:panelGrid>

Это работало нормально для меня

Answer 10

У меня работает только следующий код

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

Answer 11

Просто добавьте эти строки в ваш пользовательский css mycss.css

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

Answer 12

Чтобы традиционные, а также все современные темы не имели границ, применяйте следующее;

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

Я поместил панель внутри таблицы данных, и, следовательно, мой рабочий раствор

.ui-datatable-scrollable-body .myStyleClass tbody td{border:none;}

за

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>

Answer 14

В Primefaces theme.css будет иметь код ниже, просто нам нужно указать styleClass как 'ui-panelgrid-blank'. Таким образом, это удалит границу для компонента panelGrid.

      .ui-panelgrid.ui-panelgrid-blank {
  border: 0 none;
  background: none;
}

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>

Answer 15

Пожалуйста, попробуйте это тоже

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

Answer 16

Используйте модификацию стиля ниже, чтобы удалить границу для кнопки Primefaces

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