⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

I have a bug in the display of the pagination control



kenvogt

kenvogt
  • profile picture
  • Member

Posted 20 July 2012 - 19:31 PM

Take a look at the attached. It shows the bar that should give pagination control for a list. Note where you can select the page. In this case it should say "Page [ 1 ] of 486" where "[ 1 ]" is the input control where you select a page number. If I view the code, I see this:


<div class="pDiv2">
<div class="pGroup">
<div class="pSearch pButton" id='quickSearchButton' title="Search">
<span></span>
</div>
</div>
<div class="btnseparator">
</div>
<div class="pGroup">
<select name="per_page" id='per_page'>
<option value="10" selected="selected">10&nbsp;&nbsp;</option>
<option value="25" >25&nbsp;&nbsp;</option>
<option value="50" >50&nbsp;&nbsp;</option>
<option value="100" >100&nbsp;&nbsp;</option>
</select>
<input type='hidden' name='order_by[0]' id='hidden-sorting' value='id' />
<input type='hidden' name='order_by[1]' id='hidden-ordering' value='asc'/>
</div>
<div class="btnseparator">
</div>
<div class="pGroup">
<div class="pFirst pButton first-button">
<span></span>
</div>
<div class="pPrev pButton prev-button">
<span></span>
</div>
</div>
<div class="btnseparator">
</div>
<div class="pGroup">
<span class="pcontrol">Page <input name='page' type="text" value="1" size="4" id='crud_page'>
of
<span id='last-page-number'>468</span></span>
</div>
<div class="btnseparator">
</div>
<div class="pGroup">
<div class="pNext pButton next-button" >
<span></span>
</div>
<div class="pLast pButton last-button">
<span></span>
</div>
</div>
<div class="btnseparator">
</div>
<div class="pGroup">
<div class="pReload pButton" id='ajax_refresh_and_loading'>
<span></span>
</div>
</div>
<div class="btnseparator">
</div>
<div class="pGroup">
<span class="pPageStat">
Displaying <span id='page-starts-from'>1</span> to <span id='page-ends-to'>10</span> of <span id='total_items'>4675</span> items
</span>
</div>
</div>
<div style="clear: both;">
</div>


The css seems to be messed up. What is the solution?

kenvogt

kenvogt
  • profile picture
  • Member

Posted 20 July 2012 - 20:28 PM

BTW, I am using flexigrid, not datatables.

kenvogt

kenvogt
  • profile picture
  • Member

Posted 20 July 2012 - 20:32 PM

I have found the source of the problem. There is a conflict between the css for Foundation and Flexigrid. What I haven't found yet is the fix...

kenvogt

kenvogt
  • profile picture
  • Member

Posted 20 July 2012 - 22:37 PM

For the benefit of anyone else you runs into this problem, this css solves it:


input#crud_page
{
display: inline;
width: 35%;
font-size: 12px;
}