Xpages and Bootstrap - Pager is not aligned

Question

My pagers will not align correctly on an Xpages view. The blank table cells on the left and right are huge.

Any help would be greatly appreciated:

<?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>

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

I am still getting a space where I don't want it. Not horrible, but I do not like not knowing why something is occurring.

As you can see there is space to the left of the pager. It is a table column. I tried Bryan's suggestion and used several of the other facets, but that didn't work either. If I put the pager in northWest, then the first column of the table was extremely wide.

Oliver's suggestion shrunk the margin for top and bottom (so closer to the button and closer to the start of the view, but no change to the left column).

Just baffled as to why it is doing this?

I have my own renderer who will make a ul --> li from the pager. The list aligned nicely to the left ;-) — Frank van der Linden
What facet are you using now? I did a quick test and North seems to work best, in combination with a reduced pagination margin, like Oliver suggests but not as low as 0. The extra space when using the headerPager facet seems to be coming from the usage of the table class as the viewStyleClass. This means that this bootstrap CSS is invoked on the empty TD to the left of the pager: .table>tbody>tr>td {padding: 8px;}. — Brian Gleeson - IBM
of course I could share it, watch my blog for an upcoming blog post ;-) — Frank van der Linden

Brian Gleeson - IBM Brian Gleeson - IBM · Accepted Answer · 2015-12-10T10:40:59

You should use a different facet for the pager on the view panel. Sven Hasselbach had a good blog post explaining the layout of the various viewPnael facets: http://hasselba.ch/blog/?p=793. These additional facets explain why you can see empty table cells in firebug.

So you could try using the North or Northwest facets, instead of the headerPager facet:

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

UPDATE:

If sticking with the headerPager facet and viewStyleClass="table", you could work around the spacing in a few ways.

Make that first empty TD invisible

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

Or re-style the pager to alter its position:

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

In both cases, adding Oliver's suggested margin change helps too.

Xpages and Bootstrap - Pager is not aligned

2 Answers