如何使 w2grid 宽度 100%？

Question

有人用w2grid吗？

我不知道如何让它填满 100% 的容器。

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>

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' }
            ]
        });
    });
}

尊重高度但不尊重宽度。有什么建议吗？

编辑：我不知道如何将应用程序简化为 fiddle，所以这张图片说明了我的意思。注意到 w2ui 网格右侧的浅蓝色 space 了吗？网格拒绝填充容器。可能是由于分隔容器。

当我在 chrome 浏览器的元素面板中隔离网格 css 时，我看到宽度在 div class 中被硬编码为 351px ="w2ui-网格框"。如果我在“样式”面板中取消选中该宽度，则网格会扩展以填充容器宽度。如果我将我的 css 中的 .w2ui-grid-box 设置为“width: 100% !important”，它不会受到尊重。

我下载了作者的 Simple-Grid 演示并运行它。工作得很好。当我更改 window 大小时，网格会相应调整。所以我想这个问题在本质上可能更普遍，因为我在其他组件中看到过这种行为。它们作为独立组件工作正常，但当放置在另一个容器内时，自动调整大小将无法工作。在这些类型的情况下，你们如何确定出了什么问题？

Answer 1

我终于想通了！我搬了

.w2ui-grid-box {
    width: '100%' !important;
}

到 main.css 文件的最底部，但即使那样也不能解决问题。但后来我去掉了单引号，低估了它的工作原理！我在 css 中还有其他地方以及我看到的许多其他地方都在 100% 左右使用单引号或双引号，没有任何问题，所以当删除它们时我感到非常惊讶。吸取的教训永远不要在 100% 左右使用单引号或双引号！

Answer 2

您可以添加以下内容CSS。

#grid{
width: 100% !important;
}
.w2ui-grid-box{
    width: 100% !important;
}

如何使 w2grid 宽度 100%？

how to make w2grid width 100%?

javascript

html

w2ui