search

mleibman / SlickGrid

A lightning fast JavaScript grid/spreadsheet
http://wiki.github.com/mleibman/SlickGrid
MIT License
6.81k stars 1.98k forks source link

next/previous button #1141

Open Muneem opened 7 years ago

Muneem commented 7 years ago

I want t style next/previous buttons? I cant find how to style in your css. I want my own buttons

6pac commented 7 years ago

If you inspect in a browser, this is the pager HTML:

<div class="slick-pager">
  <span class="slick-pager-nav">
    <span class="ui-state-default ui-corner-all ui-icon-container">
      <span class="ui-icon ui-icon-seek-first"></span>
    </span>
    <span class="ui-state-default ui-corner-all ui-icon-container">
      <span class="ui-icon ui-icon-seek-prev"></span>
    </span>
    <span class="ui-state-default ui-corner-all ui-icon-container">
      <span class="ui-icon ui-icon-seek-next"></span>
    </span>
    <span class="ui-state-default ui-corner-all ui-icon-container">
      <span class="ui-icon ui-icon-seek-end"></span>
    </span>
  </span>
  <span class="slick-pager-settings">
    <span class="slick-pager-settings-expanded" style="">Show: 
      <a data="0">All</a>
      <a data="-1">Auto</a>
      <a data="25">25</a>
      <a data="50">50</a>
      <a data="100">100</a>
    </span>
    <span class="ui-state-default ui-corner-all ui-icon-container">
      <span class="ui-icon ui-icon-lightbulb"></span>
    </span>
  </span>
  <span class="slick-pager-status">Showing page 4 of 2000</span>
</div>

The icons are currently standard jqueryUI icons, they are not styled by SlickGrid. So just apply CSS to the ui-icon class within a slick-pager-nav classed parents.

Muneem commented 7 years ago

My Case is different. i am seeing this as navigation button

Now there is some CSS written which is giving some arrow to navigation buttons.