jQuery Grid Plugin - jqGrid - Topic: Hacking the jQuery-UI Theme Switcher

tony on Hacking the jQuery-UI Theme Switcher

Tue, 05 May 2009 07:47:57 +0300

Hello Steven,

Thanks. Good catch. Will try to do this for the beta.

I aggree with you about font sizes in the themes. The recommended approach of jQuery UI team is to use

font-size: 62.5%;

This approach IMHO is not good and it works if you load the page, but if you try to add dynamically a UI Widget it does not work. Example. If you have tab and try to add dynamically (via url) a accordion whitin tab you will have a destroyed font size for the accordion. Try it.

This is the reason that I have set a fixed font size for all grids.

Best Regards

Tony

mainster on Hacking the jQuery-UI Theme Switcher

Sat, 02 May 2009 15:09:50 +0300

I used the following CSS to tweak jqGrid for Themes:

html, body {
    margin: 0;            /* Remove body margin/padding */
    padding: 0;
    overflow: hidden;    /* Remove scroll bars on browser window */
    font-size: 75%;
}

.ui-jqgrid-title {
font-size: 12px;
}

.ui-pg-button {
border: 1px solid transparent;
}

table th.ui-th-column {
font-size:0.7em;
}

table.ui-pg-table td {
border: 1px solid transparent !important;
font-size:0.7em;
}

table.ui-pg-table td span {
border: 1px solid transparent !important;
}

table.ui-pg-table input {
font-size:0.7em;
height:18px !important;
}

div#srchmodlist td {
font-size:0.7em !important;
}

div#srchmodlist input#sval,
div#srchmodlist select#sopt {
width: 12em;
}

div#pager.ui-jqgrid-pager {
height: 30px !important;
}

And the following css addons using jQuery selectors

jQuery(document).ready(function(){
                $("#list").addClass("ui-widget");
                $("td#pager_center table.ui-pg-table td:nth-child(4)").addClass("ui-state-default");
                $("td#pager_center + td").addClass("ui-state-default");

});

Also in formedit.js the searchGrid must be set to width 600, the default 410

is just too small. I'm sure there are other places that also needs tweaking ;P

StevenBlack on Hacking the jQuery-UI Theme Switcher

Sat, 02 May 2009 09:55:50 +0300

Hi Tony,

As usual, GREAT work on jQuery 3.5 Alpha 3.

I have also been using the jQuery-UI theme switcher tool and here are some easy things I think you should consider.

First, I think you should consider hosting the .js file yourself. Everything below requires its modification. Another reason to host yourself: as I write this the ThemeSwitcher link used by the demo is not responding, so the jQgrid 3.5 Alpha 3 demos do not work right now.

Background: All the themes are defined on a single (long) line in the .js file. That line is easy to find.

To hack the file it is easier to add a few line-feeds prior to each <li> element in the file. This breaks the javascript but makes the line, now one block per theme, easier to edit.

Theme font sizes: Various themes use different fonts, and require different font-size CSS to look consistent. However I disagree with the selections of the jQuery-UI team. Certain themes, like Blitzer for example, are way too big.

I normalized all my theme font-size attributes to 1.1 em and I am much happier as a result. Like this:

…&fsDefault=1.1em&amp… (everywhere)

Looks good and works great!

Ugly themes: Lets be honest: many of the default themes, especially the darker ones, are never going to be used by anyone. Also, the ThemeSwitcher javascript file is huge. While you have the themes visually segmented with line breaks, feel free to delete whole blocks (bounded by <li>) that invoke ugly themes.

Zebra-striping for grids: while you are here, I am sure you can figure out how to add a zebra-striping style to this theme switcher. Idea: take the background color range between ui-widget-content and ui-widget-header and interpolate a point just a few percentages off the value of ui-widget-content.

When done: remove the line breaks you added earlier and walla!

**–** Steve