[英]how to make w2grid width 100%?
Does anybody use w2grid ?有人使用w2grid吗?
I cannot figure out how to make it fill 100% of its container.我不知道如何让它填满 100% 的容器。
The html looks like this: html 看起来像这样:
<div id="a" style="width:100%"> <!-- top left container-->
<div>This is a table header</div>
<div id="grid" style="width: 100% !important; height: 100%;"></div>
The javascript looks like this: javascript 看起来像这样:
function addWatchlistTable() {
$(function () {
$('#grid').w2grid({
name: 'grid',
header: 'List of Names',
columns: [
{ field: 'fname', caption: 'First Name', size: '20%' },
{ field: 'lname', caption: 'Last Name', size: '20%' },
{ field: 'email', caption: 'Email', size: '30%' },
{ field: 'sdate', caption: 'Start Date', size: '30%' }
],
records: [
{ recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' },
{ recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' },
{ recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' },
{ recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' },
{ recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' },
{ recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' }
]
});
});
}
The height is respected but not the width.尊重高度,但不尊重宽度。 Any suggestions?
有什么建议么?
EDIT : I could not figure out how to simplify the app into a fiddle so this image shows what I mean.编辑:我不知道如何将应用程序简化为小提琴,所以这张图片显示了我的意思。 Notice the light blue space to the right of the w2ui grid?
注意到 w2ui 网格右侧的浅蓝色空间了吗? The grid refuses to fill the container.
网格拒绝填充容器。 Probably due to the splitter container.
可能是由于分离器容器。
When I isolate the grid css in the elements panel of the chrome browser, I see the width is hard-coded to 351px in the div class="w2ui-grid-box".当我在 chrome 浏览器的元素面板中隔离网格 css 时,我看到 div class="w2ui-grid-box" 中的宽度被硬编码为 351px。 If I uncheck that width in the Styles panel, then the grid expands to fill the container width.
如果我在 Styles 面板中取消选中该宽度,则网格会扩展以填充容器宽度。 If I put.w2ui-grid-box in my css to "width: 100%,important".
如果我将 css 中的.w2ui-grid-box 设置为“宽度:100%,重要”。 it is not respected.
它不被尊重。
I downloaded the author's Simple-Grid demo and ran it.我下载了作者的 Simple-Grid 演示并运行它。 Works perfectly fine.
工作得很好。 When I change the window size, the grid adjusts accordingly.
当我更改 window 大小时,网格会相应调整。 So I guess this question might be more general in nature as I have seen this kind of behavior in other components.
所以我想这个问题在本质上可能更普遍,因为我在其他组件中看到了这种行为。 They work fine as stand-alone components but when placed inside of another container, the auto-sizing fails to work.
它们作为独立组件可以正常工作,但是当放置在另一个容器中时,自动调整大小无法正常工作。 How do you all determine what is going wrong in these types of situations?
你们都如何确定在这些类型的情况下出了什么问题?
You can add the below CSS.您可以添加以下 CSS。
#grid{
width: 100% !important;
}
.w2ui-grid-box{
width: 100% !important;
}
I FINALLY figured it out!我终于想通了! I moved the
我移动了
.w2ui-grid-box {
width: '100%' !important;
}
to the very bottom of the main.css file but even that did not fix the problem.到 main.css 文件的最底部,但即使这样也不能解决问题。 But then I took off the single quotes and low-and-behold it worked.
但后来我去掉了单引号,然后发现它起作用了。 I have other places in the css and plenty of other places I've seen that use single or double quotes around 100% with no issues so I was totally surprised when removing them worked, Lesson learned NEVER PUT QUOTES, SINGLE OR DOUBLE, AROUND 100%!
我在 css 中有其他地方,还有很多其他地方我看到使用单引号或双引号大约 100% 没有问题,所以当删除它们时我完全感到惊讶,经验教训永远不要放引号,单引号或双引号,大约 100 %!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.