Xpages和Bootstrap - Pager未对齐

Question

我的寻呼机在Xpages视图上不能正确对齐。左边和右边的空白表格单元格很大。

​

​

任何帮助都将不胜感激：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <div
        class="panel panel-default">
        <!-- Default panel contents -->
        <div
            class="panel-heading">Panel heading</div>
        <xp:viewPanel
            rows="30"
            id="viewPanel1"
            viewStyleClass="table"
            var="rowData">
            <xp:this.facets>
                <xp:pager
                    partialRefresh="true"
                    layout="Previous Group Next"
                    xp:key="headerPager"
                    id="pager1" />
            </xp:this.facets>
            <xp:this.data>
                <xp:dominoView
                    var="view1"
                    viewName="(PC)" />
            </xp:this.data>
            <xp:viewColumn
                id="viewColumn1">
                <xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value>
                <xp:link
                    escape="true"
                    id="link1"
                    value="">
                    <xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("serialNumber");}]]></xp:this.text>
                    <xp:eventHandler
                        event="onclick"
                        submit="true"
                        refreshMode="complete">
                        <xp:this.action>
                            <xp:openPage
                                name="/xpPCForm.xsp"
                                target="openDocument">
                                <xp:this.documentId><![CDATA[#{javascript:rowData.getDocument().getUniversalID()}]]></xp:this.documentId>
                            </xp:openPage>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:link>
                <xp:viewColumnHeader
                    id="viewColumnHeader1"
                    sortable="true"
                    value="Serial Number" />
            </xp:viewColumn>
        </xp:viewPanel>
    </div>
</xp:view>

=============================================================

我仍然得到一个我不想要的空间。并不可怕，但我不喜欢不知道为什么会发生这样的事情。

​

​

正如你所看到的，在寻呼机的左边有空格。它是一个表列。我尝试了Bryan的建议，并使用了其他几个方面，但也不起作用。如果我将分页程序放在northWest中，那么表的第一列就会非常宽。

Oliver的建议缩小了顶部和底部的页边距(因此离按钮更近，也更接近视图的开头，但左栏没有变化)。

只是对它为什么要这样做感到困惑？

​

​

Answer 1

您应该对视图面板上的页面导航器使用不同的方面。Sven Hasselbach有一篇很好的博客文章，解释了各种viewPnael方面的布局：http://hasselba.ch/blog/?p=793。这些额外的方面解释了为什么在firebug中可以看到空的表格单元格。

因此，您可以尝试使用北面或西北面，而不是headerPager面：

<xp:this.facets>
    <xp:pager
        partialRefresh="true"
        layout="Previous Group Next"
        xp:key="north"
        id="pager1" />
</xp:this.facets>

更新：

如果坚持使用headerPager facet和viewStyleClass="table"，您可以通过以下几种方式解决间距问题。

使第一个空TD不可见

.panel > .table > tbody > tr:first-child > td:first-child {
    display:none;
}

或重新设置寻呼机的样式以改变其位置：

<xe:pagerSizes id="pagerSizes1" 
               xp:key="headerPager"
               style="left:-20px;position:relative;">
</xe:pagerSizes>

在这两种情况下，加入奥利弗建议的利润率变化也会有所帮助。

Answer 2

通常我会将以下代码添加到我的CSS中：

.pagination {
    margin: 0;
}

虽然我从来没见过这么大的空间。