Вертикальный скроллинг определенной части дашборда

Часто при верстке дашборда возникает потребность создать вертикальный скролл только у определенной части дашборда.
Например, Вам нужно, чтобы шапка дашборда была зафиксирована, а все, что ниже шапки, скроллилось; или Вам нужно, чтобы шаблон слева в меню был зафиксирован, а все что справа скроллилось.

Для этого нужно определенное сочетание виджетов на странице и их настроек для части дашборда, которая должна скроллиться.
Представим, что у нас есть шаблон, в котором есть шапка и боковое меню с перечнем разделов слева, и эти элементы при просмотре дашборда не должны скроллиться.
Для этого нам нужно перейти на страницу, далее:

  1. Добавить в root виджет Контейнер и задать для него следующие настройки (Рисунок 1): в display выбрать flex, в css class добавить flex-col

  1. Добавить внутрь виджета Контейнер еще один Контейнер и задать в нем следующие настройки (Рисунок 2):
    • height 0px;
    • в css class добавить: flex-col, flex-grow, scroll-y.

  1. Во второй Контейнер добавить виджет Разметка с классом scroll-y, и в этой разметке Вы уже можете верстать страницу дашборда, которая должна скроллиться (Рисунок 3)

Вуаля! Результат Вы можете посмотреть в видео по ссылке: Recording #41

Также в wiki Вы можете прочитать про скроллинг в дочерних элементах: Инструкция

2 лайка