Header name and desc/asc symbols overlaps

[innc]

Hello :)

I have noticed the following issue, if you reduce much the width of the browser, then header name and desc/asc symbols will overlap. In my opinion this doesn't look nice.

Picture example for blue skin: http://s7.directupload.net/file/d/2732/niutsquo_jpg.htm

Picture example for cupertino UI theme style: http://s14.directupload.net/file/d/2732/85bunm8q_jpg.htm

One possible solution for the blue skin would be this:

Add at style.css of the Blue Skin:

table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th 
{
    background-color: #e6eeee;
    border-collapse: collapse;
    font-size: 8pt;
    padding: 4px;
    padding-right: 20px;  /* NEW LINE */
}

Unfortunately this solution doesn't seem to work for Cupertino UI theme style. I added same new line to style.css like the css code at http://mottie.github.com/tablesorter/docs/example-widget-ui-theme.html

table.tablesorter thead tr th, table.tablesorter tfoot tr th 
{
    border-collapse: collapse;
    font-size: 8pt;
    padding: 4px;
    padding-right: 20px; /* NEW LINE */
}

But no effect...

[Mottie]

Hi innc!

The padding is easy enough to add to the blue theme, but I don't think we can do much with the jQuery UI theme. The main problem is that in the blue theme, the arrow is added as a background image to the header itself, whereas in the jQuery UI theme, the icons are set up to be contained in an element that is inside of the header, here is the relevant css:

.ui-widget-header .ui-icon {
  background-image: url("images/ui-icons_72a7cf_256x240.png");
}

The ui-widget-header class is applied to the table header and the ui-icon is applied to an empty span inside the header. So unless we move the class names so that table or thead has ui-widget-header and the th has ui-icon, which I haven't tested, but can pretty much bet won't look good, there is no easy fix unless you want to customize the jQuery UI css.

[innc]

Hello Rob,

I experience a little bit with the additional CSS code for the Cupertino jQuery UI Theme at website http://mottie.github.com/tablesorter/docs/example-widget-ui-theme.html

I liked to know, how Cupertino jQuery UI Theme looks like without your additional CSS code. I have noticed, normally Cupertino jQuery UI Theme places the span with header-name above the span with the asc/desc icon. No display issues now, if i reduce the the width of the browser, header name always above asc/desc icon.

Picture link: http://s1.directupload.net/file/d/2733/w3fjemek_jpg.htm

<th class="header ui-widget-header ui-corner-all">
    <span>modelClass</span>
    <span class="ui-icon ui-icon-carat-2-n-s"></span>
</th>

(I added the "." at beginning of "<" to display code here)

First this part of the additional CSS Code at website (http://mottie.github.com/tablesorter/docs/example-widget-ui-theme.html) tries to place header-name and asc/desc icon next to each other, which i would prefer, if no display issues would exist by reducing browser width.

table.tablesorter .header .ui-icon 
{
  display: block;
  float: right;
}

So I disabled this part of additional CSS as a first solution. /* ...code... */

Probably a matter of taste.

[Mottie]

I think I understand what you are saying... you want the UI theme arrows to stay to the left and centered vertically when the table width shrinks. It would be possible if the arrow was added as a background image to the TH and not the span inside of the TH. That's what I mean when I said you will have to change the UI css to make it work differently. Also because the jQuery UI arrows are part of a bigger sprite, it will show other icons in the header if you add it as a background image.

If you want to use your own custom arrows, but still use a UI theme, then I would have to modify the ui theme widget to allow adding custom background images.

[Mottie]

Hey @innc, I went back and looked at this and duh, all we needed to do was position the icon absolutely... here is a demo:

.tablesorter th.ui-widget-header {
    position: relative;
    padding-right: 20px; /* wider than the icon */
}

.tablesorter th.ui-widget-header .ui-icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -8px; /* half the icon height; older IE doesn't like this */
}

I'll make these changes whenever I make the next update.

[Mottie]

I'm guessing this issue has been resolved, so I'm closing it.

[Mottie]

Oops, I didn't mean to sound so harsh... I just updated the plugin to v2.0.25.2 that includes this css fix.

Thanks again for reporting it!