how to make w2grid width 100%?

Question

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: '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? 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". 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?

You probably meant w2grid (not w2ui-table), and by default it will take up 100% width and height of the container. Please create a fiddle/bin/pen to demontrate your issue. Side note: w2grid comes with an optional header ([demo](http://w2ui.com/web/demos/#!grid/grid-3)) so no need to create your own. — Mike Scotty, Mar 30 '21 at 07:27
Yes, apparently I did. Could swear I saw it with -table appended. Anyway, your demo page is much better and informative. Strange that they have multiple grid demo pages. Thank you very much Mike! — user3217883, Mar 30 '21 at 14:27
You're welcome. There's a small demo for each part of the w2ui framework at http://w2ui.com/web/demo - by clicking the green "More Demos" button you get to the page I linked above. Another note: if you downloaded w2ui 1.5 via the blue button on the [homepage](http://w2ui.com/web/home) you should consider to switch to the latest files available on [github](https://github.com/vitmalina/w2ui/tree/master/dist) which include a lot of bug fixes. There's also [w2ui 2.0 coming soon™](https://github.com/vitmalina/w2ui/discussions/1955) — Mike Scotty, Mar 30 '21 at 14:35
I'll try to simplify my app in a fiddle. Must be something about my container that doesn't allow the table to fill its width. Also, I'd like to know how to remove the Search and refresh buttons on the toolbar and add popup menus like this: https://www.jqueryscript.net/menu/Context-Popup-Menu-Plugin-jQuery.html — user3217883, Mar 30 '21 at 15:36
The toolbar buttons/fields can be modified by setting ``grid.show`` accordingly. See:http://w2ui.com/web/docs/1.5/w2grid.show Please do not post follow-up questions in the comments. Please also refrain from asking three questions in one issue like you're currently doing (width issue, toolbar buttons, popup menu), instead create a new issue for each individual question. — Mike Scotty, Mar 31 '21 at 07:01
Yea, I had seen grid.show. As far as I can tell, that only allows you to add or show specific types of components, not custom ones. I've abandoned that in favor of turning off the toolbar and creating my own. But you're right, I should have asked it in a separate post. — user3217883, Mar 31 '21 at 16:01

score 1 · Answer 1 · edited Apr 13 '21 at 11:47

1

You can add the below CSS.

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

edited Apr 13 '21 at 11:47

Dharman

30,962
25
85
135

answered Apr 13 '21 at 11:41

Ruhul Amin

821
11
14

score 0 · Accepted Answer · answered Apr 12 '21 at 16:55

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

how to make w2grid width 100%?

2 Answers2