0

I have defined a panel, and inside of it I want to add a pagination right alined.

I tried with the text-align property, setting margin-left and margin-right to auto, but none of them seems to work. Also tried with float: right, but then the pagination falls out of the panel

This is the html code:

<div class="container-fluid theme-showcase" role="main">

  <div class="row">

    <div class='panel panel-default'>
      <div class="panel-heading">My panel with text-align (nothing happens)</div>

      <ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>

    </div> <!-- /panel panel-default -->

  </div>

Ans this are the things I tried 

<style>
  ul#aligned {
    text-align: right;
  }
  ul#auto-margin {
    margin-left: auto;
    margin-right: auto;
  }
  ul#floated {
    float: right;
  }
</style>

Here there's a working fiddle showing the problem: http://jsfiddle.net/opensas/BfuPc/2/

opensas
  • 60,462
  • 79
  • 252
  • 386
  • What do you mean by "falls out of the panel"? It looks fine in your JSFiddle on Mac Chrome. – 2540625 Jul 20 '14 at 06:10
  • The panel closes with no content, and the pagination appears out of it. Tested it with chromium 34 and firefox 30 on elementaryOS – opensas Jul 20 '14 at 06:19
  • Would you be able to reproduce that behavior in your JSFiddle demo? – 2540625 Jul 20 '14 at 06:25

2 Answers2

0

Looking at this question: https://stackoverflow.com/a/9184443/47633, I found out about the text-center and text-right bootstrap class.

The solutions seems to be to enclose the ul.pagination with a div.text-right.

Also, the text-align:right setting works when applied to an enclosing div, but not to the ul itself.

I wonder if there's a better solution

Community
  • 1
  • 1
opensas
  • 60,462
  • 79
  • 252
  • 386
0

I think this one is just a solution. not sure if its a better one.

.panel{
direction: rtl;
}
.panel *{
direction: ltr;
}
Taxellool
  • 4,063
  • 4
  • 21
  • 38