Julian Rubisch Julian Rubisch - 3 months ago 32
CSS Question

Make bootstrap pagination overflow horizontally

I'm writing an alphanumeric filter/pagination component using bootstrap.

The problem I'm having is, I need it to be horizontally scrollable (i.e.,

overflow-x: scroll
), whereas, being a smart responsive framework, Bootstrap naturally wraps the content of the component ...

pagination wraps

https://jsbin.com/hubuxem/edit?html,output

I know there are solutions using standard Bootstrap Columns (e.g. http://stackoverflow.com/a/19838783/4341756), but I'd very much like to use the pagination component for consistency and styling.

Any hints?

Answer

You could set the <li>'s display property to inline-block, like so:

.pagination {
  white-space: nowrap;
}

#client-paginator {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 200px;
  width: 100%;
  padding: 0 15px;
}

#client-paginator li {
  display: inline-block;  
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="client-paginator">
  <ul class="pagination">

    <li><a id="pag-123">123</a>
    </li>
    <li><a id="pag-a">A</a>
    </li>
    <li><a id="pag-b">B</a>
    </li>
    <li><a id="pag-c">C</a>
    </li>
    <li><a id="pag-d">D</a>
    </li>
    <li><a id="pag-e">E</a>
    </li>
    <li><a id="pag-f">F</a>
    </li>
    <li class=""><a id="pag-g">G</a>
    </li>
    <li><a id="pag-h">H</a>
    </li>
    <li><a id="pag-i">I</a>
    </li>
    <li><a id="pag-j">J</a>
    </li>
    <li><a id="pag-k">K</a>
    </li>
    <li><a id="pag-l">L</a>
    </li>
    <li class="active"><a id="pag-m">M</a>
    </li>
    <li><a id="pag-n">N</a>
    </li>
    <li class=""><a id="pag-o">O</a>
    </li>
    <li class=""><a id="pag-P">P</a>
    </li>
    <li><a id="pag-q">Q</a>
    </li>
    <li><a id="pag-r">R</a>
    </li>
    <li><a id="pag-s">S</a>
    </li>
    <li><a id="pag-t">T</a>
    </li>
    <li class=""><a id="pag-u">U</a>
    </li>
    <li><a id="pag-v">V</a>
    </li>
    <li><a id="pag-w">W</a>
    </li>
    <li><a id="pag-x">X</a>
    </li>
    <li><a id="pag-y">Y</a>
    </li>
    <li><a id="pag-z">Z</a>
    </li>
    <li class=""><a id="pag-ä">Ä</a>
    </li>
    <li class=""><a id="pag-ö">Ö</a>
    </li>
    <li class=""><a id="pag-ü">Ü</a>
    </li>
  </ul>

</div>

Edit: Just realized that this will introduce the well-known whitespaces between pagination elements. There are ways how to get rid of those, but I don't like either one of those.