CODEWITHSUNDEEP
csstwitter-bootstrappagination
cheeseus
cheeseus

Reputation: 473

Equalize bootstrap pagination height with input+button height

pagination height

I have expanded the pagination (Bootstrap-styled) with a "jump-to-page" option but have been struggling to get the paginator list height to match that of the input and the submit button. Can't remember everything I've tried so far but here's the latest code, which is closest to what I want. Still, list height is 29px, input height (.input-sm) is 30px, and the button height (btn-sm) is 32px.

HTML code:

<ul class="pagination">
    <li><a href="?&page=Batch">First</a></li>
    <li><a href="?pn=251&perpage=50&page=Batch">Prev</a></li>
    <li><a href="?pn=245&perpage=50&page=Batch">245</a></li>
    ....
    <li><a href="?pn=253&perpage=50&page=Batch">Next</a></li>
    <li><a href="?pn=1693&perpage=50&page=Batch">Last</a></li>
    <form method="get" class="form-horizontal" action="">
        <div class="form-group input-group col-md-2">
            <input type="hidden" name="page" value="Batch" />
            <input type="hidden" name="perpage" value="50" />
            <input required type="text" class="form-control input-sm" name="pn" size="4" placeholder="Page #">
            <span class="input-group-btn"><button class="btn btn-default btn-sm" type="button">Go!</button></span>
        </div>
    </form>
</ul>

The extra CSS (the same as the bootstrap, only applied to input and button):

.pagination input,
.pagination button {
    margin-left: -1px;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 6px 12px;
}

https://jsfiddle.net/dsd2zd6c/

EDIT: PROBLEM SOLVED. Culprit was some CSS styling that came before in my custom-styles file. I had body {font: 11px/16px Verdana, Arial, Helvetica, sans-serif;} and then a {font-size:11px;} above the pagination code in my custom-styles file. Removed them and the list items and input/button height is now equal.

Upvotes: 0

Views: 2633

Answers (1)

Laszlo
Laszlo

Reputation: 2328

By removing the size classes (input-sm, btn-sm) from both you input and button your padding setting kicks in and does the job.

 <input required type="text" class="form-control" name="pn" size="4" placeholder="Page #">
 <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>

Here's an updated JSfiddle: https://jsfiddle.net/L7tq5nzd/

Upvotes: 0

Related Questions