今天又遇到的一个easyui样式的问题
最近学习jquery easyui,用easyui的layout做了一个后台页面的框架,如下图所示:
其中左边的导航菜单遇到一点点样式问题,当我调整窗口的大小时会出现:
①、左边的导航菜单的边框线会消失
②、导航菜单的宽度拉伸时菜单项的宽度不变,留出一部分空白
③、导航菜单超出屏幕的部分会显示不出来,不会出现滑动块
如下图所示:
后来发现出现该问题的原因是这部分:
<div data-options="region:'west',border:true,split:true,collapsible:true,title:'系统菜单'" style=" 240px;height:100%;" class="easyui-accordion"> @{ foreach (var m1 in ViewBag.Menu) { if (m1.PID == -1) { <div title="@m1.Name" data-options="iconCls:'icon-ok'" style="100%;height:200px;overflow:auto;"> <ul class="sub-menu"> @{ var menu = ViewBag.Menu as List<Menu>; var children = menu.Where(o => o.PID == m1.ID).ToList(); if (children != null && children.Count > 0) { foreach (var m2 in children) { <li><a href="#" onclick="addTab(@m2.ID,'@m2.Name','@m2.Url');" > } } } </ul> </div> } } } </div>
外面这个<div>既设置了region属性又设置了class=easyui-according,与之前提到的tabs当页面的大小改变之后页面不会自适应的问题类似。以后使用easyui来布局时尽量不要一个标记使用多个属性,一般把region放在外面这层,在region里面再加一个div来表示具体控件