Как изменить высоту строки ui-grid?
Я использую ui-grid. У меня много строк, и именно поэтому я использую прокрутку. Все работает отлично, пока я не попытаюсь изменить высоту строк. Затем прокрутка становится беспорядком. Я добавил пример здесь http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview Это один из учебников с веб-сайта ui - grid-единственное, что я изменил, это CSS. Я добавил эти правила.
.ui-grid-cell-contents {
padding: 1px 1px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
height: 22px !important;
font-size: 12px;
line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
height: 55px !important;
}
.ui-grid-filter-container {
padding: 1px 3px;
}
прокрутка работает отлично, если выше правила CSS удаляются. Поэтому мне либо нужно добавить больше правил CSS, либо мне нужно использовать некоторый API сетки, чтобы правильно установить высоту строки. Любая помощь будет высоко оценена.
Как изменить высоту строки и сохранить прокрутку гладкой?
обновление: Вот сравнение между сеткой по умолчанию и одной с измененным CSS: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview попробуйте прокрутить строки вверх и вниз для каждой сетки. Разница это должно быть очевидно.
4 ответов
взять:
height: 22px !important;
из css и добавить:
rowHeight:22
к gridOptions.
у меня такое чувство, что это намного плавнее.
объем.gridOptions = { значение rowheight: 33 } Лучший способ изменить высоту строки-из параметров сетки.
попробуйте добавить это в свой css:
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}
.ui-grid-row, .ui-grid-cell {
height: auto !important;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}