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, Dec 09 '15 at 17:47
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, Dec 15 '15 at 12:05
of course I could share it, watch my blog for an upcoming blog post ;-) — Frank van der Linden, Dec 17 '15 at 06:33

Brian Gleeson - IBM · Answer 1 · 2015-12-15T12:24:01.043

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.

This worked - somewhat. I can get it aligned in lower left. The article is a very good reference. Possibly my problem is I am previewing in XPiNC. I have put the updated Extension Library on my Designer, but I have to wait until the weekend to put it on the server. — Bryan Schmiedeler, Dec 10 '15 at 15:11
Brian, I added some more information to my question above. If you have any more ideas I would be very interested in hearing them. Thanks. — Bryan Schmiedeler, Dec 14 '15 at 16:39

score 0 · Answer 2 · answered Dec 09 '15 at 11:17

0

Usually I add this to my CSS:

.pagination {
    margin: 0;
}

Though I've never seen those big spaces...

answered Dec 09 '15 at 11:17

Oliver Busse

3,375
1
16
26

Oliver, I gave that a try and it didn't work for me for some reason. I checked using FireBug Lite and the container for the pager is a table with three cells. The first and last are really large (too large) and the pager is in the middle one, no matter what. So something isn't correct. I am going to eventually use a Jquery Grid, so I think this is good enough for now. – Bryan Schmiedeler Dec 09 '15 at 15:04
Oliver, I added some more information to my question above. If you have any idea, I am all ears. – Bryan Schmiedeler Dec 14 '15 at 16:39

Xpages and Bootstrap - Pager is not aligned

2 Answers2