How to set Caption Layer height in jqGrid

Question

I have following snippet to load the table generated by jqGrid.

<div id="result">
    <table id="resultTable">
        <tr>
            <td />
        </tr>
    </table>
</div>

My other css interfering with jqGrid css, it causes the "caption layer" (The orange color bar at the very top of the table) height becomes very large and overlapped with other part of the page. Sorry, post image is not allowed.

The height is about 10 times larger and seems contains 3 rows with slightly different color in each. If I remove all my css, the "caption layer" display properly, but I lost all the headers, footers etc. I tried the suggestion by Tony in the link at jgGrid forum,

<style>
    #result table.scroll thead th  {height:30px;}
</style>

and suggestions by others, but none of them works for me. Please help me to set the "caption layer" height overwrite.

I think I figure out what is going on, there is a css main body container defined in my page and what jqGrid is doing is generated table at the correct position, then add this "caption layer above the table all the way to the main body container's border, which makes it ridiculously big, by defining a sub container inside the main body container, I constrain the space of the "caption layer", now things looks much better. — Yi Qian, Oct 17 '11 at 21:50
Anyway, I like jqGrid, very powerful, only problem with it is the jqGrid forum, the registration form does not include password field, only has uid, email and I never received any confirmation email, click "forget password" link displays "new password will be sent to your email" message, but never happen. Maybe the forum is no longer active? Hope someone from jqGrid team can comment on this forum problem. — Yi Qian, Oct 17 '11 at 21:50

score 1 · Answer 1 · edited May 23 '17 at 10:34

I suppose that you have some problem with CSS style "float:left" used somewhere on the page. I recommend you to look at the answer which solved close problem. If you have the same problem you should add to the <div id="result"> an additional style definition which set the floating like style="float:left" or which remove it like style="clear:left", style="clear:right" or style="clear:both".

If you have no "floating" problem and the title div will be just increased to some unwanted height you can fix the problem by setting additional CSS statically or set the height dynamically. The answer shows how to find the caption of the grid and get its height. In the same way you can set the height.

How to set Caption Layer height in jqGrid

1 Answers1