3

如何覆盖<p:panelGrid>我的 Stylecheet 中的特定内容?

根据这个:如何隐藏时隙......

我试过了:

#frm_dash\3Adisplay td.ui-panelgrid {
    padding:0px 0px;
}

#frm_dash\3Adisplay .ui-panelgrid td {
    padding:0px 0px;
}

但它似乎不起作用。

页面建立在这个物理结构中:

<h:form id="frm_dash">
    [...]
    <p:panelGrid id="pnlg_page" style="width: 100%;">
        [...]
        <p:row>
            <p:column style="width: 50%; vertical-align: top" colspan="1">

                <p:panelGrid id="display" columns="2"> 
                    [...]
                </p:panelGrid> 

            </p:column>

            <p:column colspan="1" style="vertical-align: top;">
                [...]                                       
            </p:column>
        </p:row>
        [...]
    </p:panelGrid>
    [...]
</h:form>

Primefaces 3.4.1。- Tomcat 7.x - Mojarra

谢谢你的帮助。

4

2 回答 2

4

你犯了两个错误:

  1. 后面必须跟一个\3A空格。

  2. 该类.ui-panelgrid是在其<table>自身上设置的,而不是在它的子级上。

所以,这应该这样做:

#frm_dash\3A display.ui-panelgrid td {
    padding: 0;
}

或者只是这样,因为在已经由 ID 选择的元素上使用类名选择器是没有意义的,该 ID 本身应该是唯一的:

#frm_dash\3A display td {
    padding: 0;
}

作为另一种选择,给面板网格一个样式类,以便您可以在其他元素上重用相同的外观:

<p:panelGrid id="display" columns="2" styleClass="nopadding"> 

with(更干净的 CSS 选择器)

table.nopadding td {
    padding: 0;
}

也可以看看:

于 2012-11-06T11:27:27.970 回答
1

只需添加一个CSS代码

.ui-panelgrid .ui-panelgrid-cell{
   padding 0px;
 }
  • 如果您导入页面,则此代码将杀死 primefaces css
于 2016-09-06T08:55:27.347 回答