#angular #scrollbar #ag-grid
#angular #полоса прокрутки #ag-сетка
Вопрос:
После нескольких часов исследований я все еще не могу решить эту странную проблему.
У меня в моем проекте Angular есть простая сетка Ag (версия 10.2, Ag Grid версии 24.1), ничего особенного, просто для отображения не редактируемых данных (примечание: rowData не является асинхронным, потому что я вручную устанавливаю данные):
<div>
<ag-grid-angular
#agGrid
id="grid"
style="width: 500px; height: 500px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
></ag-grid-angular>
</div>
Параметры сетки:
this.gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
editable: true,
suppressMenu: true,
filter: true,
floatingFilter: true,
filterParams: { buttons: ['clear'] }
},
headerHeight: 60,
animateRows: true,
pagination: false,
paginationAutoPageSize: false,
}
Если я использую ее в новом проекте, полосы прокрутки отображаются отлично, никаких проблем.
Но если я использую ее в своем текущем проекте, полосы вообще не отображаются, не имеет значения, если я принудительно использую инструкции из документов (переопределите переполнение .ag-body-viewport для прокрутки !важно. Значение !important необходимо для переопределения встроенного стиля.) или с такими настройками, как alwaysShowVerticalScroll: true.
В моем проекте я использую Bootstrap, и у меня классическая структура (заголовок, левая строка меню, содержимое). Я предполагаю, что какой-то стиль нарушает систему прокрутки сетки Ag, но я не могу найти, что происходит.
Может кто-нибудь подсказать мне, что я могу проверить, чтобы решить эту проблему? Я искал любое «переполнение» в моем styles.css, но безуспешно.
Ответ №1:
Хорошо, итак, разработчик CSS покажет мне правильный путь.
Я поделюсь этими знаниями здесь для будущих ссылок, потому что для разработчика, не связанного с CSS (например, для меня), не очевидно, где это найти.
Проблема заключалась в том, что для всего приложения был общий стиль:
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
Я искал только стили «переполнения», так как это было ключевым, когда я гуглил об этой проблеме. И это псевдокласс, поэтому он отображается внизу стиля Chrome Dev tools.
После удаления этого прокрутки работают так, как ожидалось.