javascript - Controlling HTML overflow/visibility -
i'm developing site bootstrap 3 column design, pagination controls need obey following constraints:
- fit in middle column.
- remain single line without wrapping multiple lines.
- be responsive. don't need "full"/"fluid" col-xs col-xl responsive, fluid above col-md , can implement alternative col-xs , col-sm.
i'm utterly unable work out how can damn thing behave @ all.
the 'base' sort of this:
.pagination-button { font-size: 2em; }<!-- bootstrap core css --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <!-- mdb core css --> <link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet"> <!-- font awesome --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> <!-- jquery --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- bootstrap core javascript --> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- mdb core javascript --> <script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script> <body> <div class='container-fluid'> <div class='row'> <div class='col-xs-2'> <div class="card-panel"> <span>foo</span> </div> </div> <div class='col-xs-8'> <ul class="pagination"> <li> <a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a> </li> <li> <a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a> </li> <li> <a class="pagination-item" href="?page=1">1</a> </li> <li class="active"> <a class="pagination-item" href="?page=2">2</a> </li> <li> <a class="pagination-item" href="?page=3">3</a> </li> <li> <a class="pagination-item" href="?page=4">4</a> </li> <li> <a class="pagination-item" href="?page=5">5</a> </li> <li> <a class="pagination-item" href="?page=6">6</a> </li> <li> <a class="pagination-item" href="?page=7">7</a> </li> <li> <a class="pagination-item" href="?page=8">8</a> </li> <li> <a class="pagination-item" href="?page=9">9</a> </li> <li> <a class="pagination-item" href="?page=10">10</a> </li> <li> <a class="pagination-item" href="?page=11">11</a> </li> <li> <a class="pagination-item" href="?page=12">12</a> </li> <li> <a class="pagination-item" href="?page=13">13</a> </li> <li> <a class="pagination-item" href="?page=14">14</a> </li> <li> <a class="pagination-item" href="?page=15">15</a> </li> <li> <a class="pagination-item" href="?page=16">16</a> </li> <li> <a class="pagination-item" href="?page=17">17</a> </li> <li> <a class="pagination-item" href="?page=18">18</a> </li> <li> <a class="pagination-item" href="?page=19">19</a> </li> <li> <a class="pagination-item" href="?page=20">20</a> </li> <li> <a class="pagination-item" href="?page=21">21</a> </li> <li> <a class="pagination-item" href="?page=22">22</a> </li> <li> <a class="pagination-item" href="?page=23">23</a> </li> <li> <a class="pagination-item" href="?page=24">24</a> </li> <li> <a class="pagination-item" href="?page=25">25</a> </li> <li> <a class="pagination-item" href="?page=26">26</a> </li> <li> <a class="pagination-item" href="?page=27">27</a> </li> <li> <a class="pagination-item" href="?page=28">28</a> </li> <li> <a class="pagination-item" href="?page=29">29</a> </li> <li> <a class="pagination-item" href="?page=30">30</a> </li> <li> <a class="pagination-item" href="?page=31">31</a> </li> <li> <a class="pagination-item" href="?page=32">32</a> </li> <li> <a class="pagination-item" href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a> </li> <li> <a class="pagination-item" href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a> </li> </ul> </div> <div class='col-xs-2'> <div class="card-panel"> <span>foo</span> </div> </div> </div> </div> </body>i able clean single line:
.pagination-button { font-size: 2em; } .pagination { display: inline-flex; flex-direction: row; align-items: center; flex-shrink: 1; justify-content: center; white-space: nowrap; }<!-- bootstrap core css --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <!-- mdb core css --> <link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet"> <!-- font awesome --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> <!-- jquery --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- bootstrap core javascript --> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- mdb core javascript --> <script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script> <body> <div class='container-fluid'> <div class='row'> <div class='col-xs-2'> <div class="card-panel"> <span>foo</span> </div> </div> <div class='col-xs-8'> <ul class="pagination"> <li> <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a> </li> <li> <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a> </li> <li><a href="?page=1">1</a> </li> <li class="active"><a href="?page=2">2</a> </li> <li><a href="?page=3">3</a> </li> <li><a href="?page=4">4</a> </li> <li><a href="?page=5">5</a> </li> <li><a href="?page=6">6</a> </li> <li><a href="?page=7">7</a> </li> <li><a href="?page=8">8</a> </li> <li><a href="?page=9">9</a> </li> <li><a href="?page=10">10</a> </li> <li><a href="?page=11">11</a> </li> <li><a href="?page=12">12</a> </li> <li><a href="?page=13">13</a> </li> <li><a href="?page=14">14</a> </li> <li><a href="?page=15">15</a> </li> <li><a href="?page=16">16</a> </li> <li><a href="?page=17">17</a> </li> <li><a href="?page=18">18</a> </li> <li><a href="?page=19">19</a> </li> <li><a href="?page=20">20</a> </li> <li><a href="?page=21">21</a> </li> <li><a href="?page=22">22</a> </li> <li><a href="?page=23">23</a> </li> <li><a href="?page=24">24</a> </li> <li><a href="?page=25">25</a> </li> <li><a href="?page=26">26</a> </li> <li><a href="?page=27">27</a> </li> <li><a href="?page=28">28</a> </li> <li><a href="?page=29">29</a> </li> <li><a href="?page=30">30</a> </li> <li><a href="?page=31">31</a> </li> <li><a href="?page=32">32</a> </li> <li> <a href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a> </li> <li> <a href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a> </li> </ul> </div> <div class='col-xs-2'> <div class="card-panel"> <span>foo</span> </div> </div> </div> </div> </body>how can clean list more responsive? css great after few hours trying working, i'm willing entertain javascript based approaches solving ux/ui problem i'm having.
i had idea solve pretty if tag each <li> element priority , add elements <ul> in order of priority until filled allowed width, i'm @ loss how implementing , avoid usual browser edge cases, , i'd throwing css out window it, i'm still hoping simpler css based answer.
currently, .pagination isn't displayed inline-flex. bootstrap uses class , makes inline-block. change .pagination ul.pagination css picked (since it's more specific). force list items in 1 row.
depending on u want, u give ul max-width , work overflow-x:scroll; in css. have add in width:100%; ul.pagination.
Comments
Post a Comment