Тёмный

Switching from Row to Column in Bubble.io. 3 Quick steps. 

mikreative
Подписаться 471
Просмотров 555
50% 1

This is a video about Switching from Row to Column in Bubble.io. Bubble doesn't let us do this in conditionals, so adding a bit of CSS will accomplish this.
Here are the steps:
Flexible Repeating Group
Setup
Plugin:
Classify
Page:
Appearance:
Background style: Flat color
Background color: Background
Layout:
Container layout: Column
Width for UI builder: 1440
Min height: 960
Step 1
Add Group to page
Layout:
Container layout: Column
Horizontal Alignment: Center
Uncheck Make this element fixed-width
Min width: 10
Check Make this element fixed-height
Height: 100%
Padding: 40 all around
Conditional
When Current page width is smaller than 992
Left padding: 16
Right padding: 16
Step 2
Add Repeating Group
Appearance
Type of content: your data type
Data source: Do a Search for your data type
Set fixed number of rows: checked
Rows: 1
Set fixed number of columns: checked
Columns: 3
Separators
Style: solid
Width: 32
Color: doesn’t matter as long as it is 0%
ID - Follow Classify instructions - open curly bracket addClass: “repeatingGroup” close curly bracket
Layout
Cell’s container layout: Row
Horizontal alignment: center
Uncheck Make this element fixed-width
Min width: 280
Max width: 1360
Min height: 280
Fit height to content: checked
Step 3
Add HTML element to the top
Layout:
This element is visible on page load: unchecked
Collapse when hidden: checked
Appearance
Less than bracket style greater than bracket
Dot repeatingGroup open curly bracket
display: flex;
Close curly bracket
@medai screen and (max-widthL 991px) open curly bracket
Dot repeatingGroup open curly bracket
flex-direction: column;
Close curly bracket
Close curly bracket
Less than bracket /style greater than bracket
That's it. Let me know what questions you have.

Опубликовано:

 

7 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 7   
@eubrunonine
@eubrunonine 9 месяцев назад
Can it be done in a form container where it would change from row to column?
@mikreative861
@mikreative861 8 месяцев назад
Hi Bruno, You could do it that way or have the label and input in a group, that has a minimum width of 256, inside a group set to row. For instance first and last name as separate inputs. In desktop they are in a row and when it gets smaller that 256 they naturally appear in a column. Does that help?
@mysk.e5458
@mysk.e5458 Год назад
on my repeating group there is no option to add an ID attribute
@mikreative861
@mikreative861 Год назад
In the left side menu go to Settings, then General, scroll to the bottom, under Advanced options check the Expose the option to add an ID attribute to the HTML elements.
@ProNoobDev
@ProNoobDev 11 месяцев назад
it still baffles me that they do not have this built-in in bubble
@mikreative861
@mikreative861 11 месяцев назад
With the announcements yesterday, it looks like sometime in 2024.
@ProNoobDev
@ProNoobDev 11 месяцев назад
great news indeed !@@mikreative861
Далее
Bubble.io Native Dynamic Card
18:59
Просмотров 583
Bubble.io popup to bottom sheet
13:34
Просмотров 1,3 тыс.
Using CSS custom properties like this is a waste
16:12
Просмотров 173 тыс.
Pagination for Repeating Groups - Bubble Tutorial
19:02
Design awesome tables in Bubble.io | Tutorial
25:33
Просмотров 35 тыс.
Dark mode or light: the Bubble.io edition
37:23
Beautiful Mobile Menu - Bubble.io Tutorial
14:29
Просмотров 18 тыс.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 380 тыс.
Changing Scroll Direction for Cards in Bubble.io
17:11