2

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. https://stackoverflow.com/a/19838783/4341756), but I'd very much like to use the pagination component for consistency and styling.

Any hints?

Community
  • 1
  • 1
Julian Rubisch
  • 547
  • 7
  • 21

3 Answers3

3

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.

Christoph Lupprich
  • 1,170
  • 8
  • 16
3

use .flex-wrap class like below

<ul class="pagination flex-wrap">
...
</ul>
hakki
  • 6,181
  • 6
  • 62
  • 106
2

The most simple way of doing this is to set display: table-cell; to .pagination>li and display: table; to the .pagination element itself. I set some CSS styles to the #client-paginator, html and body just to make it look nicer.

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
#client-paginator {
  position: relative;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}
.pagination {
  display: table !important;
}
.pagination>li {
  display: table-cell !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <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>
</body>

</html>
thepio
  • 6,193
  • 5
  • 35
  • 54