jqGrid中的大标题答案

【问题标题】：Large header in jqGridjqGrid中的大标题
【发布时间】：2011-08-05 20:43:32
【问题描述】：

我一直在用新的 razor 视图引擎摆弄 asp.net mvc 3。

我的目标是有一个固定的 2 列布局，每列都有一个 jqGrid。虽然我没有运气！一旦我在右列中添加一个网格，它的标题就会变得很大。我不认为它的 jqGrids 错误，因为如果我删除样式，两个网格都会按预期显示。

我看到 jqGrid 的 css 将 display: block 作为 ui-helper-clearfix 类的一部分应用于标题。

任何人有什么建议可以让它工作或我可以尝试的其他固定流体 css（我已经尝试了一堆网上的模板，但没有运气）？

模板文件中的代码：

 ...       <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>

更新：

我的页面实际上需要在左侧显示 2 个固定宽度的网格，在右侧显示一个流畅的网格。

这是我的 css 的一个问题（我仍然不知道为什么），但我最终使用了以下有效的布局（rail 是左列）：

#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>

【问题讨论】：

标签： css asp.net-mvc-3 jqgrid razor

【解决方案1】：

你应该使用

<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>

作为网格的模板。如果你的情况应该是

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

如果你想阻止浮动，你不应该忘记在下一个 div 的样式中包含“clear:left”，它应该在网格之后。

查看带有两个网格的演示 here

【讨论】：

@woggles：问题解决了吗？
@woggles：你也可以看看another way来解决同样的问题。

【解决方案2】：

虽然 Oleg 的建议确实固定了标题的高度，但它并不构成解决方案——至少如果您希望正确的 div 具有流动性并扩展到浏览器窗口的宽度，则不会。问题是为了在右边的网格容器上使用float:left，你必须指定一个宽度。浮动元素必须具有与其关联的明确宽度（如果没有，它们将采用其中最宽元素的宽度）。

对我有用的一种解决方法是将浮动的高度设置为较小的 (1px)，并为该 div 的内容设置显式高度。

我创建了一个jsFiddle example 来说明问题和解决方法。

【讨论】：

解决问题的更多方法可以找here