New Responsive Engine [beta] is Live!

I did mention it in my original post that I was getting it the moment I group two elements. And that error won’t go away until I ungroup them. Even if I click on the error in the error box, it doesn’t show any measures to be taken etc.

More than this I am not sure what exactly is causing it. Don’t know if it comes on grouping certain types of elements etc. I can share my editor if required.

I had given a screenshot. That may probably help coders as they can check when does that error come?

Hello again everyone. I released another video just now in which I build an entire signup page from scratch using the new responsive engine. You can watch it on YouTube here: https://youtu.be/Okobpne9v-E

total core (1)

The page that I build in the video was modelled after this image that I found on Dribble

Hope you find the video helpful! Have a good weekend. Happy Bubbling to you all.

8 Likes

Breakpoints for the win :trophy: :raised_hands: :muscle:

3 Likes

@nick.carroll Third party elements, like tables, charts, icons and so on, are randomly taking a 0px height. They also don’t seem to adjust to alignment rules. I urge you to make this a priority.

Perhaps a hotfix is in order?

3 Likes

Nice one @jacobgershkovich

Hopefully breakpoints will be the next update since it’s a pain.

2 Likes

WOW. Just took 10 mins to play around with it and it is AMAZING!

The Align to Parent is a lifesaver, soooo easy to use and I was able to build a full responsive sidebar in 60 seconds.

Great job

5 Likes

Nice! I was thinking the Align to Parent layout mode might be good for that as well as various “dashboard-like” layouts, since elements can basically be “pinned” to various locations around the edges of the container.

Seems like the new layout engine brings a ton of flexibility with respect to how to achieve a given UI.

:+1:

3 Likes

It’s so powerful, and it was mobile ready out of the box just using that align to parent system. Truly a huge leap forward

Correct, plugins don’t have access to the new responsive engine yet in the plugin editor. This is a top priority at the moment.

6 Likes

We’ve identified the case of the errant “Group X is not a possible option” issue in the issue checker.

The default horizontal alignment for a new container in a column parent container is stretch to fit - however, if the group that is added in has a fixed width, this option isn’t possible and an issue is raised. We are updating the default alignment as a fix, but in the meantime, just toggle the child container’s horizontal alignment and the issue will go away.

3 Likes

Thanks for the reply Nick. Big fan of the new engine. Eager to see the next batch of fixes.

1 Like

Hey @help and @sudsy,

Have you found a solution to the breakpoints issue @jacobgershkovich explained at the end of his video?

Is it just me. or does the naming of row and column containers backward. When I create a column container, my instinct is that the content organises in columns (ie horizontal). When I create a row container, I expect the content is going to organise in rows (ie vertical). I assume its based on the fact a column will scroll as a column and row as a row, but if you’re not doing real scrolling you don’t even necessarily think of this. I’ve only just realised that so much of my frustration has been cause I keep getting this wrong.

My other biggest learning point to date is I used to put everything in groups because you had to use groups to collapse elements, etc. I was initially frustrated that components didn’t sit within groups like they used to. Once you realise that you only need groups for actually doing grouping stuff, it all starts to make a lot more sense, and it is definitely the right way to have approached this.

3 Likes

In general what is the difference between “Y” of an element and “margin top”?

A row organizes stuff horizontally.

Columns organize vertically.

Rows will stack rearrange your content as the screen size changes.

I like do stuff like

Row↔️

  • Column :arrow_up_down:
    — Row↔️
    — Row↔️
    — Row↔️
  • Column↕️
    — Row↔️
    — Row↔️
    — Row↔️
1 Like

Brilliant! I did not notice this…
FYI- I have been coding for over 40 years in too many languages and frameworks to remember, and never experienced such a great environment. Thank you.

2 Likes

Hello @nick.carroll

Here goes the question of the month :slight_smile: . When do you think the responsive engine will be out of beta so we can really convert our apps into the new responsive?

Thanks a lot and have a good day.

2 Likes

Have not viewed any videos. Sorry. Personally, I derive much more benefit from tinkering.

I generally set out with a specific UI (layout and behavior) that I need and then try to create it using various approaches. There’s often more than one way to achieve a given layout for a specific screen width, but each might respond differently at other widths.

That said, as you noted, it’s beta software, so things will evolve and improve. The best we can do at this point is provide feedback and submit bug reports.

2 Likes

@nick.carroll

Still experiencing issues with the new responsive engine and how it works/doesn’t work with custom CSS.

I submitted a bug report with a video that demonstrates and explains the issue.

Bug report #18046

In the video and editor I have a page with three different versions attempting to get the behavior I want using the new responsive engine to exemplify the problems. There is another page with the old engine in use with the same setup of custom CSS to show how it should behave to exemplify the bug in the new engine as well as reiterate a feature request of a checkbox on a container element that would be to ‘enable scroll on overflow’ to avoid the need for the custom css all together.

The issue seems to be that a parent element in the new engine is not able to contain all the child elements when the child elements contents requires more height than what is set on the container as a max-height or a max-height setting using custom CSS.

1 Like

The thing to keep in mind is that the terms “row” and “column” refer to how the contents of the container are arranged. The parent (container) controls the children (contents).

So, items inside a “row” container try to arrange themselves “in a row” and wrap vertically if they don’t fit horizontally. Conversely, items inside a “column” container try to arrange themselves “in a column” (stacked).

Maybe this will help somewhat…

row-layout
 
 
col-layout
 
 

That’s just the beginning, though, because each child also has its own layout controls to allow its alignment along the opposing axis to be adjusted as well. IOW, items inside a row container can each have their vertical alignment tweaked even though they’re collectively aligned horizontally, and vice versa for items inside a column container.
 
 

Yeah, what @jared.gibb says; although I would refine that statement slightly by changing the last two words to “width decreases”. :slightly_smiling_face:

5 Likes