web-dev-qa-db-ja.com

特定の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;
}

動作しません。

cssjsfprimefacesfacelets
57
Eleeist

ボーダーは、trではなく、生成されたtdおよびtable要素に設定されます。だから、これはする必要があります：

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

どうやって見つけたの？ Chromeのwebdeveloperツールセットで生成されたHTML出力とすべてのCSSスタイルルールを確認するだけです（右クリック、Inspect ElementまたはF12キーを押します） 。 FirebugとIE9には同様のツールセットがあります。混乱については、JSF/Faceletsが最終的にHTMLを生成し、CSSはJSFソースコードではなくHTMLマークアップにのみ適用されることに留意してください。したがって、CSSを適用/微調整するには、代わりにクライアント（webbrowser）側を調べる必要があります。

enter image description here

こちらもご覧ください：

まだPrimeFaces 4以前を使用している場合は、代わりに以下を使用してください。

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

Primefaces 6.0を使用しています。パネルグリッドから境界線を削除するには、次のようにこのスタイルクラス「ui-noborder」を使用します。

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

Primefaces libで「components」という名前のcssファイルを使用します

29
Mr.Q

これは私のために働いた：

。ui-panelgrid td、.ui-panelgrid tr 
 {
 border-style：none！important 
}
21
Mohammed Pasha

BalusCの答えがうまくいかない場合は、これを試してください：

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

列の間に行が見つかったら、次のコードを使用します。

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

現在、Primefaces 5.xにはpanelGridに「columnClasses」という名前の属性があります。

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

そのため、2列のpanelGridに対して、cssクラスを2回繰り返します。

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

他の要素にとって、い「！important」は必要ではありませんが、それだけで国境まではうまく機能します。

3
Kanjarana

試して

<p:panelGrid styleClass="ui-noborder">
2
spyder man

従来のテーマと現代のすべてのテーマに境界線がないようにするには、次を適用します。

<!--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>
0
Koekiebox

もっとシンプルなものが必要な場合は、変更するだけです。

<p:panelGrid >

</p:panelGrid>

に：

<h:panelGrid border="0">

</h:panelGrid>

それは私のためにうまくいきました

0
Edson Cezar

BalusCで述べたように、trではなく、生成されたtdおよびtable要素のPrimeFacesによって境界が設定されます。ただし、PrimeFacesバージョン5で試してみると、PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solidからより具体的な一致があるように見えるため、提案されたスタイルを適用すると黒い境界線が表示されます。

!important宣言を使用せずにPrimefacesをオーバーライドするには、次のスタイルを使用してみてください。

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

言及したように、CSSが PrimeFacesの後にロードされる であることを確認してください。

0
CodeNotFound

私はデータグリッド内にパネルグリッドを配置したため、私の作業ソリューションは

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

for

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

私にとっては、次のコードのみが機能します

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

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

カスタムcss mycss.cssにこれらの行を追加するだけです

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