[kenvogt]

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]

BTW, I am using flexigrid, not datatables.

[kenvogt]

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]

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;
}