开发者

Large header in jqGrid

I've been fiddling with asp.net mvc 3 with the new razor view engine.

My goal is to have a fixed-fluid 2 column layout wit开发者_开发百科h a jqGrid in each column. I'm having no luck though! As soon as I add a grid to the right column its header goes huge. I don't think its jqGrids fault because if i remove the styles both grids display as expected.

I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.

Anyone have any suggestions to get this to work or other fixed-fluid css i could experiment with (I've tried a bunch of templates from online with no luck)?

Code from the template file:

 ...       <style type="text/css">           
            #left { float: left; width: 400px;}
            #content { margin-left: 400px;}               
        </style>
</head>
<body>
            <div>
                <div id="left">                
                    @RenderSection("SPTreeGrid")
                </div>
                <div id="content">
                    @RenderSection("ClientPickerGrid")
                </div>                         
           </div>
</body> 

Large header in jqGrid

Update:

My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.

It was an issue with my css (I still dont know why) but I ended up using the following layout which works (rail is the left column):

#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{   
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px; 
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}

cshtml:

 <div id="container">
    <div id="content">
        @RenderSection("ReportGrid")
    </div>
    <div id="rail">           
            @RenderSection("SPTreeGrid")           
            @RenderSection("ClientPickerGrid")           
    </div>
</div>


Although Oleg's suggestion does fix the height of the title, it does not constitute a solution -- at least not if you want the right div to be liquid and expand to the width of the browser window. The problem is that in order to use float:left on the right grid container, you must specify a width. Floated elements must have explicit widths associated with them (if not, they take on the width of the widest element inside them).

One work-around that worked for me is to set a height of the floated to something small (1px) and set an explicit height for the content of that div.

I have created a jsFiddle example that illustrates the problem and the work-around.


You should use

<div style="float:left">
    <table id="list1"><tr><td/></tr></table>
    <div id="pager1"></div>
</div>
<div style="float:left">
    <table id="list2"><tr><td/></tr></table>
    <div id="pager2"></div>
</div>

as the template for the grids. If you case it should be

<style type="text/css">           
    #left { float: left; }
    #content { float: left; }
</style>

You should not forget to include "clear:left" in the style of the next div which should be after the grid if you want to brake the floating.

See demo with two grids here

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜