Search code examples
cssxpages

XPages bootstrap break(small space) between table and inputBox

I have Bootstrap 3.2.0. When I put a table into a page (.xsp) it takes so much space there.

I tried all bootstrap classes like table-condensed, table-responsive etc. for tables and input-sm, form-control and the others for inputboxes.

I created a CSS class shown below and then even if I use those classes nothing changed.

Expected result:

I'm looking for a solution on how to make whole spaces between inputBox and table to disappear.

.input-group-xs>.form-control, .input-group-xs>.input-group-addon, .input-group-xs>.input-group-btn>.btn { 
    height: 22px;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

.input-xs {
    height: 22px;
    padding: 2px 5px;
    font-size: 11px;
    line-height: 1.5; 
    border-radius: 3px;
}

This shows how it looks like

Thanks in advance C.A.

Solution

  • I assume you are using <xp:table> ... </xp:table> for your table.

    The white space within the table which you want to reduce is defined for class .table as
    padding: 8px.

    Change it this way:

    .table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,
.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td
{
    padding: 1px;
}