Search code examples
javascripthtmlw2ui

how to make w2grid width 100%?

Does anybody use w2grid?

I cannot figure out how to make it fill 100% of its container.

The html looks like this:

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

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: '[email protected]', sdate: '2/1/2010' },
                { recid: 2, fname: "Bruce", lname: "Wilkerson", email: '[email protected]', sdate: '6/1/2010' },
                { recid: 3, fname: "John", lname: "McAlister", email: '[email protected]', sdate: '1/16/2010' },
                { recid: 4, fname: "Ravi", lname: "Zacharies", email: '[email protected]', sdate: '3/13/2007' },
                { recid: 5, fname: "William", lname: "Dembski", email: '[email protected]', sdate: '9/30/2011' },
                { recid: 6, fname: "David", lname: "Peterson", email: '[email protected]', 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? The grid refuses to fill the container. Probably due to the splitter container.

enter image description here

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". If I uncheck that width in the Styles panel, then the grid expands to fill the container width. If I put .w2ui-grid-box in my css to "width: 100% !important", it is not respected.

I downloaded the author's Simple-Grid demo and ran it. Works perfectly fine. When I change the window size, the grid adjusts accordingly. 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?

Solution

  • 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. 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%!