在jqGrid的大标题 [英] Large header in jqGrid
问题描述
我一直在摆弄用asp.net MVC 3与新的Razor视图引擎。
我的目标是在每列一个jqGrid的固定流体2列布局。我有没有运气，但！只要我想补充一格，在右列它的头变大。我不认为它jqGrids的错，因为如果我删除两个电网的预期显示的样式。
我看到了jqGrid的CSS的应用显示：块到头部的UI辅助-clearfix类的一部分
任何人有任何建议，得到这个工作或其他固定流体的CSS我可以用实验（我已经尝试了一堆模板从网上没有运气好的话）？
从模板文件code：
...＆LT;风格类型=文/ CSS＆GT;
#left {浮动：左;宽度：400像素;}
＃内容{保证金左：400像素;}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;
＆LT; DIV ID =左＆GT;
@RenderSection（SPTreeGrid）
＆LT; / DIV＆GT;
＆LT; DIV ID =内容＆GT;
@RenderSection（ClientPickerGrid）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
更新：
实际需要我的页面到左边和右边一液一体显示在固定宽度2的网格。
这是我的CSS问题（我仍然不知道为什么），但我最终使用下面的布局，工程（铁路是左栏）：
#container的{
溢出：隐藏;
填充左：400像素; / *轨道的宽度* /
}
* HTML的#container {
高度：1％; / *所以IE发挥不错* /
}
＃内容
{
宽度：100％;
左边框：400像素; / *轨道的宽度和颜色* /
保证金左：-400px;
浮动：权利;
}
＃轨{
宽度：400像素;
浮动：左;
保证金左：-400px;
显示：内联; / *所以IE发挥不错* /
}
CSHTML：
＆LT; DIV ID =容器＆GT;
＆LT; DIV ID =内容＆GT;
@RenderSection（ReportGrid）
＆LT; / DIV＆GT;
＆LT; DIV ID =铁路＆GT;
@RenderSection（SPTreeGrid）
@RenderSection（ClientPickerGrid）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
虽然奥列格的建议不会修复标题的高度，不构成一个解决方案 - 至少，如果你想正确的股利是液体和扩大到浏览器窗口的宽度。问题是，为了使用浮动：左右侧网格容器上，您必须指定的宽度。浮动元素必须有与之相关的明确的宽度（如果没有，他们承担他们里面最宽元素的宽度）。
一个解决方法为我工作是设置的漂浮的东西小（1像素）的高度，并设置明确的高度，该分区中的内容。
我创建了一个的jsfiddle例如说明该问题和解决方法。
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 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.
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>
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.
这篇关于在jqGrid的大标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
