Twitter Bootstrap with jQuery-ui fixes for jqGrid

Issue:
Using Twitter Bootstrap with jQuery-ui causes all kinds of issues with jqGrid.

Goal:
Provide css to fix jqGrid display issues. This document is a work in progress and will continue to add. Please reply to me if you found this useful or have any suggestions.

Solutions:

Create a css (scss SASS style) file and include it after jQuery-ui stylesheet.

1. Issue with the grid lines looking faded
.ui-jqgrid {
    .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
        opacity: 1;
    }
}

2. Pager textbox and number of rows drop down box text issues
.ui-jqgrid {
    .ui-pg-selbox, .ui-pg-input {
        width: inherit;
        border: none;
        padding: 1px;
    }
}


Print | posted @ Wednesday, August 15, 2012 8:48 AM

Comments on this entry:

No comments posted yet.

Post A Comment
Title:
Name:
Email:
Comment:
Verification: