I'm trying to apply this SlickGrid example:
http://mleibman.github.com/SlickGrid/examples/example4-model.html
to my own web project.
When I drop my grid in to the top of my page, it renders correctly. However, when I drop it into a jQuery UI Tabs tab on the same page, the CSS Sprite that renders the search image is incorrectly offset.
The icon is rendered with
<span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/>
It looks like jQuery UI Tabs also uses the same CSS classes, and of course a conflict arises.
Looking at the effective styles in IE9, the control outside of jQuery UI Tabs that renders correctly has the following:
The control that renders incorrectly looks like this:
Bottom Line
Placing the SlickGrid in a jQueryUI Tab causes the ui-icon-search
class to be lost and therefore the wrong background-position-x/y
to be set.
Why is that class being lost and how can I fix the issue?
The problem
When jQueryUI creates tabs from the HTML it adds the jQueryUI CSS classes. From the jQueryUI examples:
becomes
The problem is happening because the SlickGrid content now exits as a child of an element with the class
ui-widget-content
. Actually, there are 2 ancestors of the grid header that have that class - in the above code see<div id="tabs">
and<div id="tabs-1">
both have that class applied when tabs are created.The jQueryUI CSS rules that are supposed to apply to get the correct search icon are:
The markup for the icon is:
so therefore the CSS rules
.ui-icon
,.ui-icon-search
and the first match of the 3rd rule.ui-state-default
are applied.However when the same markup exists as a descendent of a element with the class
.ui-widget-content
, the 2nd part of the 3rd rule above (.ui-widget-content .ui-state-default
) also matches which is more specific. See http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg for a Star Wars themed explaination of CSS specificity. Essentially thebackground
property of the 3rd rule that includesbackground-position:50% 50%
is more specific than the single selector.ui-icon-search
rule therefore overriding the correctbackground-position:-160px -112px
.The solution
Need to make the
.ui-icon-search
rule the same or more specific than the.ui-widget-content .ui-state-default
rule which can be done by either:!important
to the ruleFor example
or
I cannot think of a way that doesn't involve changing the jQueryUI CSS (or duplicating the
.ui-icon-search
rule in your own CSS with one of the two solutions above). I would actually be interested to see if there is another way myself!