0

Take a look at the appearance of my filterToolbar in Chrome:

filterToolbar in Google Chrome

And now IE 10:

filterToolbar in IE 10

Why is IE cutting off the toolbar like that? It looks even worse in Compatibility Mode. I have tried a couple methods of changing the toolbar height:

.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column input, .ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select { height: 200px; }

^ Adding this in the Site.css file does not seem to affect anything.

var $toolbar = $("tr.ui-search-toolbar", grid[0].grid.hDiv); $toolbar.height(200); // test size of 200

^ This almost works; the toolbar itself is upsized to whatever value, but the input fields are still cut in half:

IE 10 with $toolbar.height(200)

If you then click on any of the input fields, they jump up a few pixels to display the whole thing, but that is obviously not what I want. And clicking on the selection dropdowns does not move them at all.

The page is built in ASP.NET Web Forms using jqGrid v4.5.2 and jQuery v1.8.2.

2
  • It should be some conflict with your other CSS used in your project. Do you have the demo online or you can prepare such demo in jsfiddle.net?
    – Oleg
    Jul 2, 2013 at 17:41
  • I'm sorry, there is no demo online. I played with jsfiddle but since all the code is mashed together by asp.net before it is sent to the browser, it seems like I will find the CSS conflict before I can get the fiddle to look correct.
    – pelotron
    Jul 2, 2013 at 20:22

2 Answers 2

1

This usually happens when you have padding set on the td. For example you have some css like this:

td {
    padding: 5px;
}

Since jqGrid's css doesn't specify padding for the cell that contains the input boxes any css like the above will effect the cells. Since it's not recommended to modify jqGrid's css because next time you upgrade to the next version any mods will be lost, try "overriding" (not really overriding) it like so:

.ui-jqgrid .ui-search-table td {
    padding: 0px;
}
0

This is not the best answer, but it is an answer. A friend of mine recommended that I use a "reset CSS" sheet to wipe out the browser's default styles. I applied the sheet found here and it more or less solved this issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.