Адаптивная верстка в AW BI позволяет создавать дашборды, которые автоматически подстраиваются под разные устройства (компьютеры, планшеты, мобильные телефоны). Это особенно важно, если отчет содержит множество элементов, и нужно обеспечить удобное отображение на любом экране.
Один из ключевых инструментов для адаптивной верстки — контейнеры. Они помогают группировать и упорядочивать виджеты, управлять их расположением и поведением при изменении размеров экрана.
Что такое контейнеры?
Контейнеры — это системные виджеты, которые позволяют:
- группировать элементы визуально;
- управлять их расположением (вертикально, горизонтально или вручную);
- настраивать отступы и расстояния между виджетами;
- создавать сложные компоновки (например, фиксированные панели с прокруткой содержимого).
Важно: само пространство дашборда уже является контейнером. Его настройки (расположение элементов) доступны во вкладке «Вид».
Основные принципы работы с контейнерами
1. Группировка элементов
Контейнеры помогают визуально объединять виджеты. Например:
- Создаем контейнер, добавляем в него нужные элементы.
- Настраиваем фон, отступы и расстояние между виджетами.
- Выбираем тип расположения: вертикально, горизонтально или абсолютное позиционирование.
Пример:
- Создаем контейнер → добавляем 3 виджета.
- Задаем горизонтальное расположение элементов.
- Настраиваем отступы (20px по горизонтали и вертикали).
- Закрашиваем фон контейнера для наглядности.
2. Вложенные контейнеры
Для сложной структуры можно использовать вложенные контейнеры:
- Основной контейнер содержит подгруппы виджетов.
- Внутри размещаем дополнительные контейнеры с разными настройками.
Пример:
- Основной контейнер (горизонтальный).
- Вложенный контейнер 1 (виджеты 1 и 2).
- Вложенный контейнер 2 (виджеты 3 и 4).
- Между ними увеличенный отступ для визуального разделения.
3. Фиксация размеров элементов
По умолчанию виджеты растягиваются при изменении размера контейнера. Но можно зафиксировать ширину/высоту:
- Выбираем виджет → «Поведение в контейнере» → Устанавливаем «Фиксированный» размер вместо «Растянуть».
Пример:
- Три виджета в горизонтальном контейнере.
- Первый виджет фиксируем по ширине (например, 500px).
- Остальные автоматически подстраиваются при изменении размера.
4. Прокрутка внутри контейнера
Если дашборд длинный, можно сделать так, чтобы:
- Верхняя панель (фильтры, тренды) оставалась на месте.
- Основной контент прокручивался.
Как настроить:
- Контейнер, где должна быть прокрутка → «Абсолютное позиционирование».
- Для всех внутренних виджетов: Поведение в контейнере По вертикали
→ «Фиксированный», по горизонтали → «Растянуть». - Высота контейнера должна быть больше экрана → появляется прокрутка. Либо высота виджета внутри контейнера должна быть больше этого контейнера → появляется прокрутка.
5. Создание сложных виджетов
Контейнеры позволяют комбинировать элементы в единые блоки:
- Например, тренд + диаграмма в одной карточке.
- Можно заблокировать виджеты внутри контейнера (чтобы не «разваливались» при перемещении).
Пример:
- Создаем контейнер с фоном.
- Внутри размещаем тренд + мини-график.
- Настройки на вкладке Вид: убираем тени, ровняем элементы.
6. Адаптация под мобильные устройства
Для разных устройств можно:
- Менять расположение (на мобильном — вертикальное).
- Скрывать/заменять виджеты (через «Скрыть» на вкладке Структура).
- Настраивать разные версии одного виджета (например, уменьшать шрифты для мобильных).
Пример:
- На ПК: 3 тренда в горизонтальном контейнере.
- На телефоне: 2 тренда + другой тип диаграммы.
Дополнительные советы:
- Закрашивайте контейнеры для наглядности при разработке.
- Используйте вкладку «Структура» для удобного управления вложенными элементами. Например, для скрытия виджета или его блокировки на ИП.
- Экспериментируйте с разными типами расположения.
Ссылка на примеры выше 
Используйте контейнеры, чтобы ваши отчеты выглядели идеально на любом устройстве. Нужны более подробные примеры? Посмотрите мастер-класс по адаптивной верстке.
Остались вопросы? Задавайте их в сообществе AW BI!