我在响应模式下有一个p:dataGrid。我无法理解为什么在dataGrid内容之前的dataGrid顶部有一个“margin”,并且无法正确删除它:
http://www.zimagez.com/zimage/margindatagrid.php
我试图在ui-datagrid-column类上设置一个负边距顶部,但它删除了第三个面板的边距(该列表包含4个对象)。
<p:dataGrid value="#{secb.secus}" var="sec" layout="grid" columns="2" styleClass="dataGrid-secuEdit">
<p:panel>
<h:outputText value="panelx"/>
</p:panel>
</p:dataGrid>
.dataGrid-secuEdit{
border: 2px solid green;
width: 585px;
margin: 0 auto;
}
.ui-datagrid-column{
margin-top: -25px !important;
}
这是生成的html:
<div id="main">
<div id="j_idt174" class="ui-datagrid ui-widget dataGrid-secuEdit">
<div id="j_idt174_content" class="ui-datagrid-content ui-widget-content ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-datagrid-column ui-grid-col-6">
<div id="j_idt174:0:j_idt31" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt174_0_j_idt31">
<div id="j_idt174:0:j_idt31_content" class="ui-panel-content ui-widget-content">panelx</div>
</div>
<script id="j_idt174:0:j_idt31_s" type="text/javascript">PrimeFaces.cw("Panel", "widget_j_idt174_0_j_idt31", {id: "j_idt174:0:j_idt31"});</script>
</div>
<div class="ui-datagrid-column ui-grid-col-6">
<div id="j_idt174:1:j_idt31" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt174_1_j_idt31">
<div id="j_idt174:1:j_idt31_content" class="ui-panel-content ui-widget-content">panelx</div>
</div><script id="j_idt174:1:j_idt31_s" type="text/javascript">PrimeFaces.cw("Panel", "widget_j_idt174_1_j_idt31", {id: "j_idt174:1:j_idt31"});</script>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-datagrid-column ui-grid-col-6">
<div id="j_idt174:2:j_idt31" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt174_2_j_idt31">
<div id="j_idt174:2:j_idt31_content" class="ui-panel-content ui-widget-content">panelx</div>
</div>
<script id="j_idt174:2:j_idt31_s" type="text/javascript">PrimeFaces.cw("Panel", "widget_j_idt174_2_j_idt31", {id: "j_idt174:2:j_idt31"});</script>
</div>
<div class="ui-datagrid-column ui-grid-col-6">
<div id="j_idt174:3:j_idt31" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt174_3_j_idt31">
<div id="j_idt174:3:j_idt31_content" class="ui-panel-content ui-widget-content">panelx</div>
</div>
<script id="j_idt174:3:j_idt31_s" type="text/javascript">PrimeFaces.cw("Panel", "widget_j_idt174_3_j_idt31", {id: "j_idt174:3:j_idt31"});</script>
</div>
</div>
</div>
</div>
<script id="j_idt174_s" type="text/javascript">PrimeFaces.cw("DataGrid", "widget_j_idt174", {id: "j_idt174"});</script>
<script type="text/javascript" src="/iso/javax.faces.resource/respond.min.js.xhtml?ln=js"></script>