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

Question

Как удалить границу из конкретных 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;

}

не работает.

698 14

css jsf primefaces facelets

14 ответов:

Comments

Ничего не найдено.

BalusC · Accepted Answer · 2017-05-23 15:34:20

граница установлена на сгенерированном tr и td элементов, а не на table. Итак, это:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}
как я его нашел? Просто проверьте сгенерированный вывод HTML и все правила стиля CSS в наборе инструментов webdeveloper Chrome (rightclick,Проинспектировать Элемент или нажмите F12). Firebug и IE9 имеют аналогичный набор инструментов. Что касается путаницы, просто имейте в виду, что JSF/Facelets в конечном итоге генерирует HTML и что CSS применяется только к разметке HTML, а не на исходном коде JSF. Поэтому, чтобы применить / finetune CSS, вам нужно посмотреть на стороне клиента (webbrowser).

Читайте также:

как я могу переопределить значение по умолчанию на основе схемы PrimeFaces CSS с пользовательские стили?

удалить границу из всех PrimeFaces P: panelGrid components

если вы все еще на PrimeFaces 4 или старше, используйте вместо этого:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
    border: none;
}

NԀƎ · Accepted Answer · 2017-01-11 09:58:18

Я использую Primefaces 6.0 и для того, чтобы удалить границы из моей панели сетки я использую этот класс стиля "ui-noborder" следующим образом:
<p:panelGrid columns="3" styleClass="ui-noborder">
   
</p:panelGrid>
он использует css-файл с именем "компоненты" в primefaces lib

Mohammed Pasha · Accepted Answer · 2013-06-28 18:23:43

это сработало для меня:
.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}

Paul Wasilewski · Accepted Answer · 2012-10-31 21:52:40

Если BalusC ответ не работает, попробуйте этот:
.companyHeaderGrid td {
     border-style: hidden !important;
}

Ajeesh · Accepted Answer · 2014-10-26 19:11:18

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

.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>

Kanjarana · Accepted Answer · 2015-01-31 00:09:36

Сейчас, 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">
к другим элементам, уродливым"!важно " не надо, но до границы как раз с этим мне нормально работать.

spyder man · Accepted Answer · 2016-03-21 07:58:59

попробовать
<p:panelGrid styleClass="ui-noborder">

Marouane Afroukh · Accepted Answer · 2013-07-09 13:57:56

просто добавьте эти строки в свой пользовательский css mycss.css
table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

CodeNotFound · Accepted Answer · 2017-05-23 15:18:06

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

Edson Cezar · Accepted Answer · 2016-05-09 19:57:42

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

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

</h:panelGrid>
это отлично сработало для меня

jrabasilio · Accepted Answer · 2016-08-26 19:41:52

для меня работает только следующий код
.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

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

Koekiebox · Accepted Answer · 2017-03-19 11:20:55

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

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

techy360 · Accepted Answer · 2014-06-11 12:48:47

пожалуйста, попробуйте этот
.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

Ganesh Kumar · Accepted Answer · 2013-08-12 09:16:25

используйте ниже изменение стиля, чтобы удалить границу для Primefaces переключатель
.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}