2011-04-14 71 views
2

我一直在用新的剃须刀视图引擎来处理asp.net mvc 3。jqGrid中的大标题

我的目标是在每列中都有一个带有jqGrid的固定流体2列布局。我虽然没有运气!只要向右列添加网格,它的标题就会变得很大。我不认为它的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> 

enter image description here

更新:

我的页面确实需要在左侧和流体一个显示在固定宽度的2个格对。

这是我的CSS问题(我仍然不知道为什么),但我最终使用下面的布局,工程(铁路是左栏):

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

回答

2

虽然奥列格的建议,并确定标题的高度,它不构成解决方案演示 - 至少,如果你想正确的股利是液体和扩大的宽度的浏览器窗口。问题是,要在右侧的网格容器上使用float:left,您必须指定一个宽度。浮动元素必须具有与它们相关的明确宽度(如果不是,则它们具有其中最宽元素的宽度)。

对我而言,一种解决方法是将浮动高度设置为小(1px),并为该div的内容设置明确的高度。

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

+0

解决问题的另一种方法可以在[此处]找到(http://stackoverflow.com/a/8057675/315935) – Oleg 2012-01-03 22:02:55

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如果你想刹车浮动应该是电网后的风格“清左”。

看到两个网格here

+0

@woggles:你解决了这个问题吗? – Oleg 2011-06-08 11:00:00

+0

我做过:)见上面我的更新。谢谢 – woggles 2011-06-12 20:16:26

+0

@woggles:你也可以看[另一种方式](http://stackoverflow.com/a/8057675/315935)来解决同样的问题。 – Oleg 2012-01-03 22:01:47