CODEWITHSUNDEEP
javascriptjquerycssiconstablesorter
numegil
numegil

Reputation: 1926

jquery tablesorter CSS arrow icons

This is really more of a CSS question than a jQuery question. I'm using the tablesorter jQuery plugin to sort tables dynamically.

Here's what it looks like currently: enter image description here

Here's the CSS code that I'm using:

th.sortable{
    font-weight: bold;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center right;
}

th.headerSortUp {
    background-image: url("arrow-up.gif");
}
th.headerSortDown {
    background-image: url("arrow-down.gif")
}

The problem that I have with the current implementation is that the arrow is way over on the right of the header. In the above example, the table is being sorted by level, but it almost looks like it could be by location.

Is there an easy way to move the arrow over to the left, so it's directly to the right of the end of the "level" label?

Upvotes: 3

Views: 20759

Answers (6)

Rodrigo Ignacio Díaz Durán
Rodrigo Ignacio Díaz Durán

Reputation: 31

th.tablesorter-headerUnSorted {
    background-image: url(/share/css/contextmenu/images/sort_both.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-header {
    background-image: url(/share/css/contextmenu/images/sort_both.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-headerDesc {
    background-image: url(/share/css/contextmenu/images/sort_desc.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-headerAsc {
    background-image: url(/share/css/contextmenu/images/sort_asc.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

Upvotes: 2

Sunny Sharma
Sunny Sharma

Reputation: 4934

I was just missing the "tablesorter" class added to table. I added it and it solved. May this help somebody :)

Upvotes: 0

elgati
elgati

Reputation: 103

If you cascade their stylesheet, it will look exactly the way it looks on the TableSorter site. You don't even need to move it from their package. Just add this line after your style sheet declaration:

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />

Upvotes: 0

mArtinko5MB
mArtinko5MB

Reputation: 788

In my case, this worked:

table.tablesorter th.tablesorter-headerSortUp {
  background-image: url(../images/asc.gif);
}

table.tablesorter th.tablesorter-headerSortDown {
  background-image: url(../images/desc.gif);
}

Style.css downloaded from web cantained only headerSOrtUp class, but this works only with tablesorted-headerSortUp class, so they must have changed it.

Hope it saves some time to someone.

Upvotes: 0

SlavaNov
SlavaNov

Reputation: 2485

Try this:

th.headerSortUp span{
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 20px;
}

th.headerSortDown span{
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 20px;
}

And add span to your th

Edit: Changed div to span (see coments below)

Upvotes: 1

janhartmann
janhartmann

Reputation: 15003

Place a span tag in your th and style it with:

th.headerSortUp span {
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 15px;
}

Upvotes: 7

Related Questions