как сделать ширину w2grid 100%?

Кто-нибудь использует 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: '[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' }
            ]
        });
    });
}

Соблюдается высота, но не ширина. Какие-либо предложения?

ИЗМЕНИТЬ: я не мог понять, как упростить приложение до скрипки, поэтому это изображение показывает, что я имею в виду. Обратите внимание на голубое пространство справа от сетки w2ui? Сетка отказывается заполнять емкость. Наверное, из-за контейнера разветвителя.

Когда я изолирую CSS-сетку на панели элементов браузера Chrome, я вижу, что ширина жестко запрограммирована на 351px в div class = w2ui-grid-box. Если я сниму отметку с этой ширины на панели «Стили», сетка расширится, чтобы заполнить ширину контейнера. Если я добавлю .w2ui-grid-box в свой CSS к ширине: 100%! Important, это не соблюдается.

Я загрузил авторскую демонстрацию Simple-Grid и запустил ее. Работает отлично. Когда я меняю размер окна, сетка корректируется соответствующим образом. Так что я предполагаю, что этот вопрос может иметь более общий характер, поскольку я видел подобное поведение в других компонентах. Они отлично работают как автономные компоненты, но при размещении внутри другого контейнера автоматическое изменение размера не работает. Как вы все определяете, что идет не так в подобных ситуациях?

Вы, вероятно, имели в виду w2grid (не w2ui-table), и по умолчанию он будет занимать 100% ширины и высоты контейнера. Пожалуйста, создайте скрипку / корзину / ручку, чтобы продемонстрировать вашу проблему. Боковое примечание: w2grid поставляется с необязательным заголовком (demo), поэтому нет нужно создать свой собственный.   —  person user3217883    schedule 30.03.2021

Да, видимо, да. Могу поклясться, что видел это с добавленной таблицей. В любом случае, ваша демонстрационная страница намного лучше и информативнее. Странно, что у них есть несколько демонстрационных страниц сетки. Спасибо большое, Майк!   —  person user3217883    schedule 30.03.2021

Пожалуйста. Для каждой части инфраструктуры w2ui есть небольшая демонстрация по адресу w2ui.com/web/demo — нажав зеленую кнопку More Demos вы попадаете на страницу, на которую я ссылался выше. Еще одно примечание: если вы загрузили w2ui 1.5 с помощью синей кнопки на домашней странице, вам следует подумать о переключении на последние файлы, доступные на github, которые содержат множество исправлений ошибок. Также скоро появится w2ui 2.0 ™   —  person user3217883    schedule 30.03.2021

Я постараюсь упростить свое приложение на скрипке. Должно быть что-то в моем контейнере, что не позволяет таблице заполнять его ширину. Кроме того, я хотел бы знать, как удалить кнопки поиска и обновления на панели инструментов и добавить всплывающие меню, подобные этому: jqueryscript.net/menu/Context-Popup-Menu-Plugin-jQuery.html   —  person user3217883    schedule 30.03.2021

Кнопки / поля панели инструментов можно изменить, установив соответственно grid.show. См .: w2ui.com/web/docs/1.5/w2grid.show Пожалуйста не оставляйте уточняющие вопросы в комментариях. Также воздержитесь от трех вопросов в одной задаче, как вы это делаете сейчас (проблема с шириной, кнопки панели инструментов, всплывающее меню), вместо этого создайте новую задачу для каждого отдельного вопроса.   —  person user3217883    schedule 31.03.2021

Да, я видел grid.show. Насколько я могу судить, это позволяет вам добавлять или показывать только определенные типы компонентов, а не пользовательские. Я отказался от этого в пользу отключения панели инструментов и создания своей собственной. Но вы правы, я должен был спросить об этом в отдельном посте.   —  person user3217883    schedule 31.03.2021