Как удалить границу из определенных PrimeFaces p: panelGrid?

Мне трудно удалить границу из определенного 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;
}

Не работает.

Ответы

Ответ 1

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

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

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

enter image description here

См. также:

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

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

Ответ 2

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

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

Он использует файл css с именем "components" в файлах lib

Ответ 3

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

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

Ответ 4

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

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

Ответ 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>

Ответ 6

В настоящее время 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">

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

Ответ 7

Try

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

Ответ 8

Просто добавьте эти строки в свой собственный css mycss.css

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

Ответ 9

Как уже упоминалось 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.

Ответ 10

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

<p:panelGrid >

</p:panelGrid>

в

<h:panelGrid border="0">

</h:panelGrid>

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

Ответ 11

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

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

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

Ответ 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>

Ответ 13

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

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

за

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

Ответ 14

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

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

Ответ 15

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

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