Comments (6)
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.
from tablesorter.
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.
from tablesorter.
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.
from tablesorter.
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.
from tablesorter.
I'm guessing this issue has been resolved, so I'm closing it.
from tablesorter.
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!
from tablesorter.
Related Issues (20)
- filter_childRows not working correctly with multiple levels
- One search box for all table data excluding child rows HOT 1
- Selecting checkbox in header not working correctly
- Tab order issue if footer contains links
- Safari 16.2 not loading pages with tablesorter HOT 2
- parser-input-select clears inputs if column isn't sortable, filterable & parseable
- Parent and child row style together
- Tablesorter Column Selector Widget : Column Button work on hover
- Problem with Pager and ajax HOT 38
- Nested tablesorters & columnSelector widget HOT 7
- Tablesorter in Bootstrap tab-content problem
- Create Security Policy
- Case sensitive filter does not work for child rows
- Dateparser fails if trailing text HOT 2
- Special Character "&" in Filter
- Via External tablesorter filter: load two datasets
- Bug with HTML5 range input when it inside tablesorter's table header
- Date filters overlap and are invisible
- Missing support using tableSorter with jquery 4 HOT 19
- NPM missing older versions HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tablesorter.