jqGrid中的大标题 [英] Large header in jqGrid
问题描述
我一直在用新的剃刀视图引擎来解决asp.net mvc 3。
I've been fiddling with asp.net mvc 3 with the new razor view engine.
我的目标是在每一列中有一个固定流体的2列布局，每个jqGrid。我没有运气，虽然！一旦我向右列添加一个网格，其标题就会变大。我不认为它的jqGrids错误，因为如果我删除样式两个网格显示为预期。
My goal is to have a fixed-fluid 2 column layout with 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.
我看到jqGrid的CSS适用于作为ui-helper-clearfix类一部分的display：block标题。
I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.
任何人都有任何建议，让这个工作或其他固定流体的CSS我可以尝试（我已经尝试了一大堆模板在线，没有运气）？
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)?
模板文件中的代码：
... <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个网格，在右边显示一个流动的网格。
My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.
这是我的css的问题（我还是不知道为什么），但我最终使用下面的布局工作（rail是左栏）：
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>
推荐答案
虽然Oleg的建议确实修正了标题的高度，它不构成解决方案 - 至少不是如果你想正确的div是液体和扩展到浏览器窗口的宽度。问题是为了在右边的网格容器上使用 float：left ，你必须指定一个宽度。浮动元素必须具有与其相关联的显式宽度（如果不是，它们占据其中最宽的元素的宽度）。
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).
为我工作的一种解决方法是将浮动对象的高度设置为小（1px），并为该div的内容设置一个显式高度。
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.
我创建了一个 jsFiddle示例，说明问题和解决方法。
I have created a jsFiddle example that illustrates the problem and the work-around.
这篇关于jqGrid中的大标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
