删除PrimeFaces dataGrid顶部的边距

时间:2016-01-29 07:40:14

标签: css css3 jsf primefaces datagrid

我在响应模式下有一个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>                                                                

0 个答案:

没有答案