Flex div size и таблица Tabulator (версия React) - PullRequest
Новая
       20

Flex div size и таблица Tabulator (версия React)

0 голосов
/ 12 января 2020

Я пытаюсь контролировать размер элемента Tabulator на основе стиля flexbox css (http://tabulator.info/). Внутри div с заданной шириной / высотой, я хочу, чтобы поле занимало необходимое ему пространство, а таблица Tabulator заполняла остальное (по вертикали)

Следующий код работает как раз для текста, но таблиц переполните второй div: 

const columns = [
    { title: 'index', field: 'index', width: 80, formatter: 'textarea' },
    { title: 'text', field: 'text', width: 80, formatter: 'textarea' },
];

const data = [
    { index: 0, text: "A" },
    { index: 1, text: "B" },
    { index: 2, text: "C" },
    { index: 3, text: "D" }
]

...

<div
    style={{
        width: '400px',
        height: '150px',
        border: '3px solid red',
        padding: '5px',
        display: 'flex',
        flexFlow: 'column',
    }}
>
    <div
        style={{
            border: '3px solid lightblue',
        }}
    >
        Table:
    </div>
    <div
        style={{
            border: '3px solid green',
            flex: 1
        }}
    >
        <React15Tabulator
            data={data}
            columns={columns}
            layout={'fitColumns'}
            // options={options}
            index={'index'}
        />
    </div>
</div>

Если вы замените элемент React15Tabulator каким-нибудь простым текстом, выделенный зеленым div заполняет оставшуюся часть вертикального пространства, как и предполагалось.

С таблицей React15Tabulator на месте, таблица не только переполняет красный контурный div, но и сам зеленый div вытягивается.

Любой способ заставить зеленый div придерживаться предполагаемых размеров (используя flex)?

1 Ответ

0 голосов
/ 13 января 2020

Ответ сводится к неполному использованию гибких свойств. Элемент div, содержащий элемент Tabulator, должен иметь атрибут относительной позиции, поэтому дочерние элементы будут вычислять свою позицию / размер на основе этого. Элемент Tabulator должен быть установлен на абсолютную позицию и высоту 100%.

Добавьте к этому, удаляя поля табулятора по умолчанию, и все будет хорошо отображаться. 

<div
    style={{
        width: '400px',
        height: '150px',
        border: '3px solid red',
        padding: '5px',
        display: 'flex',
        flexFlow: 'column',
    }}
>
    <div
        style={{
            border: '3px solid lightblue',
        }}
    >
        Table:
    </div>
    <div
        style={{
            border: '3px solid green',
            flex: 1,
            position: 'relative',       // <<< Wil condition child sizing
        }}
    >
        <React15Tabulator
            data={data}
            columns={columns}
            layout={'fitColumns'}
            // options={options}
            index={'index'}
            style={{
                margin: 0,               // remove default margins
                height: '100%',          // size to 100%
                position: 'absolute',    //   of green div's height
            }}
        />
    </div>
</div>
...