jQuery Grid Plugin - jqGridForum

Topic RSS

selected row top line not correct color ?

29/09/2009
23:30

tim

Guest

Guests

I notice the top line of the selected row is not being colored correctly<?

This can be more noticable with certain themes more than others. The jqGrid demos page theme doesn't expose the problem as much.

see example my here :

http://www.blackstag.com/json-example

was this intentional coloring ? or just an oversight ?

thanks,

tim

[edit - also noticed it affects the most left line for the selected row]

02/10/2009
10:09

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks. It is not a bug. The behaviour is caused from UI-theming. Also one possible solution is to remove the border from the selected row - this way all will be ok.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

02/10/2009
15:17

markw65

Member

Members

Forum Posts: 179

Member Since:
30/07/2009

Offline

Tony,

I think its a bug – there's a precedence problem in ui.jqgrid.css.

Here's the relevant css:

/* ui.jqgrid.css */

.ui-jqgrid tr.jqgrow td { /*1*/

border-bottom:1px solid inherit;

border-right:1px solid inherit;

}

.ui-jqgrid .selected-row, .ui-jqgrid .selected-row td {/*2*/

border:0 none;

font-style:normal;

}

/* jquery-ui.custom.css */

.ui-state-highlight, .ui-widget-content .ui-state-highlight {/*3*/

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:#FFE45C url(images/ui-bg_highlight-soft_75_ffe45c_1×100.png) repeat-x scroll 50% top;

border:1px solid #FED22F;

color:#363636;

}

So /*2*/ tries to turn off the borders for the selected row – but is overriden by /*1*/ for the bottom right borders (which applies whether its selected or not).

If the goal is to turn off the borders for the selected row, then /*2*/ could be modified as

.ui-jqgrid .selected-row, div.ui-jqgrid tr.selected-row td {

To make it take precedence over /*1*/.

Mark

03/10/2009
05:27

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Mark,

As usual good fix, but testing the fix I see that this does not look good. Will try to find better solution.(maybe the border of the selected row should have the same color as of the non selected row)

Also, if you have idea you are welcome.

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/10/2009
20:52

markw65

Member

Members

Forum Posts: 179

Member Since:
30/07/2009

Offline

Right - my fix was qualified by "if the goal is..." 🙂

Perhaps a better fix would be to drop the "border:0 none" for the selected row - although that causes a 1px shift down and to the right of the contents of the selected row...

Mark

06/10/2009
05:41

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Mark,

Thanks. Mybe you are right.

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
58 Guest(s)

Currently Browsing this Page:
1 Guest(s)