Все, кто работал с Focus группами знает, что самая главная их проблема это то, что вы не можете управлять её динамической шириной. Т. е в разных разрешениях экрана ваш Focus группа может быть или шире или уже элемента к которому она прикреплена.
Поэтому в этой короткой инструкции я объясню, как настроить динамическую ширину для Focus Group. Начнём!
1 шаг
Создадим новый Reusable элемент, который и будет выполнять функцию дропдауна. Обязательно обновите элемент до нового респонсива.
2 шаг
Указываем в настройках Layout — Align to parent и задаём ширину и высоту нашего элемента. Я выбрал этот лайаут т. к нам нужно будет разместить некоторые элементы друг под другом.
3 шаг
Устанавливаем HTML-элемент. Я установил его в левый верхний угол, задал ему размеры 1 на 1 и присвоил название CSS
4 шаг
Устанавливаем в этот же левый верхний угол элемент Group и называем его ID.
В Type of content выбираем тип Text
В Data source выбираем:
- функцию Calculate Formula
- Type: Generate random string
- Length of characters: 12
- Ставим галочку напротив чекбокса Use letters
Мы будем использовать этот набор букв в качестве ID для каждого реюзабл элемента, который будет размещён у нас на странице.
5 шаг
Установим элемент, который будет вызывать открытие фокус группы. В текущем примере это будет обычная кнопка.
Установим Фокус группу и привяжем её к кнопке
Настроим открытие фокус группы по клику на кнопку
6 шаг
Переходим в настройки Фокус группы, прокручиваем в самый низ и находим поле, где нужно указать ID элемента. Если такого поля нет, то перейдите в settings — General и найдите чекбокс Expose the option to add an ID attribute to HTML element и поставьте там галочку.
В это поле прописываем значение Text из элемента ID, который мы создали на предыдущих шагах
7 шаг
Переходим в настройки элемента CSS и оставляем следующий код в поле для ввода<style>
# {
width: px! important;
}
</style>
И после знака # вставляем следующее значение
После этого ставим курсор перед px и указываем там следующее значение
Финально ваш код должен выглядеть вот так:
8 шаг — тестируем
Я создал отдельную страницу, где разместил 3 группы с разной шириной. Внутри каждой группы разместил созданный реюзабл элемент и вот, что получилось
Надеюсь, что материал был полезен для вас и вы сможете улучшить свои проекты.