Large header in jqGrid_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-25 09:57 出处：网络

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 so

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

Large header in jqGrid

精彩评论

关注公众号

热门标签

图文推荐

Large header in jqGrid

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：