Записаться на курс
NoCode Hero Hub

Динамическая ширина для Focus Group


Все, кто работал с Focus группами знает, что самая главная их проблема это то, что вы не можете управлять её динамической шириной. Т. е в разных разрешениях экрана ваш Focus группа может быть или шире или уже элемента к которому она прикреплена.

Поэтому в этой короткой инструкции я объясню, как настроить динамическую ширину для Focus Group. Начнём!

1 шаг

Создадим новый Reusable элемент, который и будет выполнять функцию дропдауна. Обязательно обновите элемент до нового респонсива.
Создание Reusable элемента в Bubble.io

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 группы с разной шириной. Внутри каждой группы разместил созданный реюзабл элемент и вот, что получилось

Надеюсь, что материал был полезен для вас и вы сможете улучшить свои проекты.
Quick Tips