Как изменить высоту строки ui-grid?

Я использую ui-grid. У меня много строк, поэтому я использую прокрутку. Все работает нормально, пока я не попытаюсь изменить высоту строк. Тогда прокрутка становится беспорядком. Я добавил здесь пример http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview Это один из уроков веб-сайта ui-grid - единственное, что я изменил, это CSS. Я добавил эти правила.Как изменить высоту строки ui-grid?

.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 сетки, чтобы правильно установить высоту строки. Любая помощь будет высоко оценена.

Как изменить высоту и сохранить прокрутку гладкой?

UPDATE: Вот сравнение между сеткой по умолчанию и один с измененным CSS: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview попытка прокрутить строки вверх и вниз для каждой сетки. Разница должна быть довольно очевидной.

источник

2014-11-29 Pavel Nikolov

Вынимают:

height: 22px !important;

с CSS и добавить:

rowHeight:22

к gridOptions.

У меня такое ощущение, что это гораздо более плавный.

Forked Plunker

источник

2014-12-01 13:23:20 mainguy

спасибо. Именно то, что я искал. –

Мне не нравится это решение. Когда высота сетки совпадает с высотой сетки экрана, изменение CSS здесь беспорядочно с поведением scolling. Он не может правильно подсчитать высоту строки, потому что, я подозреваю, он использует значение rowHeight в коде, а не измерение offsetHeight() – FlavorScape

scope.gridOptions = { RowHeight: 33 } Лучший способ изменения высоты строки от опций сетки.

источник

2015-01-14 13:27:29 Romcode

Почему это лучший способ? Я нахожу css намного проще. – MurWade

Поскольку ui-grid нуждается в высоте строки в javascript для вычисления. Изменив его с помощью CSS, вы испортили отображение строки – Fen1kz

Попробуйте добавить к вашей 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; 
}

источник

2016-03-02 05:03:59 Amir978

, есть ли влияние производительности из-за какого-либо влияния на виртуализацию? –

Нет, я использую его на работе и отлично работает без задержки или какого-либо воздействия. – Amir978

Я нашел «padding-top: 5px;» также полезен в дополнение к автоматической высоте; –

Просто изменить сетку с класс соответственно.

.grid{ 
    height: 70vh; 
}

источник

2016-09-07 07:23:11

ответ

Смежные вопросы