Проблема ширины таблицы табулятора с использованием сетки CSS - PullRequest
Новая
       98

Проблема ширины таблицы табулятора с использованием сетки CSS

0 голосов
/ 11 ноября 2019

У меня есть таблица Tabulator внутри страницы, которая использует CSS-сетку для макета. Когда я изменяю размер браузера, я хочу, чтобы таблица увеличивалась и уменьшалась вместе с представлением. Это прекрасно работает, когда за пределами сетки CSS, но не работает, когда внутри моей сетки CSS. При использовании сетки CSS таблица Tabulator корректно расширяется при увеличении размера браузера, но никогда не сжимается при сужении представления браузера. Вместо этого появляются полосы прокрутки, и таблица остается широкой. 

var data = [
    { name: '1', description: 'Description of thing 1', location: 'Location 1' },
    { name: '2', description: 'Description of thing 2', location: 'Location 2' },
    { name: '3', description: 'Description of thing 3', location: 'Location 3' },
];
var cols = [
    { field: 'name', title: 'Name', width: '20%', widthGrow: 1, widthShrink: 1  },
    { field: 'description', title: 'Description', width: '30%', widthGrow: 1, widthShrink: 1    },
    { field: 'location', title: 'Location', width: '50%', widthGrow: 1, widthShrink: 1   },
];

var config = {
    columns: cols,
    data: data,
    layout: 'fitColumns'
};
var mytable = new Tabulator("#mytable", config);
.main-body {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
}


/* If I use the below css instead, the table shrinking works correctly. */
/*
.main-body {
    width: 100%;
}
*/
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.js"></script>


When the view is made wider, the table expands correctly.
When it's made narrower, the table does not shrink correctly.
In the snippet view, it's easiest to use "full page" mode to see the issue.

<div class="main-body">
  <div class="main-content">
    <div id="mytable"></div>
  </div>
</div>

Если я вместо этого изменю main-body css для удаления сетки, таблица изменится правильно. 

.main-body {
    width: 100%;
}

Сетка здесь придумана с целью создания упрощенного примера. Моя фактическая сетка более сложная, поэтому я предпочел бы продолжать использовать сетку здесь.

Как я могу заставить мою таблицу табулятора как расширяться, так и сокращаться здесь с шириной браузера?

enter image description here

Вот скрипка, которая использует сетку CSS и показывает проблему изменения размера таблицы: https://jsfiddle.net/cfarmerga/wtqo65uc/26/

Вот скрипка, которая не использует сетку CSS, и показываетправильное изменение размера таблицы: https://jsfiddle.net/cfarmerga/wtqo65uc/29/

1 Ответ

0 голосов
/ 11 ноября 2019

Не случайно, это проблема с моим использованием сетки CSS, а не с самим табулятором. Этот пост, касающийся раздувания сетки CSS, был полезен: https://css -tricks.com / предотвращение-раздувания сетки /

Изменение моего CSS для предоставления явного минимального размера сетки быловсе это заняло. 

.main-body {
    ...
    grid-template-columns: minmax(0, 1fr);
    ...
}
...