⚠ In case you've missed it we are migrating 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 forum is read-only and soon will be archived. ⚠


I have a bug in the display of the pagination control

pagination

  • Please log in to reply
3 replies to this topic

#1 kenvogt

kenvogt

    Advanced Member

  • Members
  • PipPipPip
  • 51 posts

Posted 20 July 2012 - 07: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?

Attached Thumbnails

  • Screen shot 2012-07-20 at 2.20.54 PM.png


#2 kenvogt

kenvogt

    Advanced Member

  • Members
  • PipPipPip
  • 51 posts

Posted 20 July 2012 - 08:28 PM

BTW, I am using flexigrid, not datatables.

#3 kenvogt

kenvogt

    Advanced Member

  • Members
  • PipPipPip
  • 51 posts

Posted 20 July 2012 - 08: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...

#4 kenvogt

kenvogt

    Advanced Member

  • Members
  • PipPipPip
  • 51 posts

Posted 20 July 2012 - 10: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;
}





Also tagged with one or more of these keywords: pagination

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users