New Responsive Engine [beta] is Live!

What I mean is dragging items that are visually larger than the group currently is. Right now the item has to fit inside the group, or else you can’t drag it in.

3 Likes

Cheers Bubble, great to see this. It’s definitely a shock going from all drag and drop to basically no drag and drop, but I’m sure we’ll see some of that for re-ordering elements and increases heights and widths eventually make into the UI.

My biggest frustration was that I naturally set parent elements to 100 per cent, but was also using the margins and therefore the elements were going beyond the 100 per cent. Seems silly that I have to do the math to take into account margins and that 100 per cent width for children groups should be default and the application takes the margin away from that 100 per cent.

The other thing that seems illogical to me is that I set up the proportions of my group using the minimum width which I typically do as a percentage, but then I want to set a minimum pixel count as well, to trigger the responsiveness. I eventually worked out that if I set my first column as a percentage and then set the minimum on the second column in pixels I could get it to do what I wanted but I think you need to have a default/starting width, a minimum width and a maximum width.

I’d also like the ability to have margins between columns not stretch.

5 Likes

I have almost finished converting an entire page – One thing I’ve noticed is I’m manipulating the element tree quite a bit… And I have a feature request that’s been a long time coming…

When we right click an element in the tree, can we get a quick “Edit” in that context menu? Clicking an element… then trying to click the exact element in the editor without touching the sub items is killing me. If I had a dime for everytime I clicked an element INSIDE the group I’m actually trying to edit, I’d be rich :slight_smile:

Screen Shot 2021-11-10 at 10.08.23 AM

15 Likes

Thank you… one idea. In the responsive view there are presets for screen size, but there is no numeric value to show the actual px width. It would be helpful to have a number show when you drag the width bar. We use 375px width as a standard - but can not really tell since the mobile preset it 320px? Thanks again.

This is actually suuuuper duuupper great thanks and well done <3

2 Likes

Can you say more about how you fixed this, I have an issue with the group focus that I dont know how to fix Group Focus not acting right

1 Like

Hi @nick.carroll - Quick question. Under the conditionals you have allowed us to change margins. How soon will you be releasing other options in the layout tab? Specifically how soon will you let us change min/max height and width. So for instance I can go into conditionals and add for example when current page width is less than 768 min width equals 300 for instance. Assuming this is coming soon what is the easiest snippet of code workaround in the meantime? If anyone else like @rico.trevisan @sudsy @jacobgershkovich @mariel.vargas has a work around snippet would love to know it. Thanks so much in advance!

Thanks @nick.carroll . Not always do we add item by copy-paste, isn’t it? My most frequent way of adding an element is clicking on the ‘elements’ pane on the left and then clicking/drawing it on the canvas in the group/page I want. Now for me to do that there should be some empty space in the page. If the page is already full with groups, then I can’t do this. When I click on canvas, I’d end up clicking some group instead of the page.

And increasing/decreasing min. height from the “layout” is not the most comfortable one. There is no snapping grids or gridlines to guide. There is a lot of experiment on keep changing the numeric value etc.

Also I couldn’t find a documentation on what min. height means. Does it mean that it will add a scrollbar if content is more? Does it mean that if some content is invisible, then it will leave a blank gap at the bottom? Clicking on “See reference” in editor takes to Responsive Engine Beta’s root page.

Could you please also comment on “Group B is not a possible option” error that I am getting?

:warning: Issue: material design icons are randomly taking on 0 height.
To reproduce, it seems to happen when the parent group is resizes or alignment is changed.

:warning: Issue: When grouping items, everything becomes “fixed width” despite having another setting prior.

4 Likes

Totally agree with you suggestion, but wanted to give a quick tip though:
CMD + Click selects an element under an element.

I use this to access groups that are filled with elements.

2 Likes

Wait… … … … … … . What? This should be on the front page of the documentation in all capital letters. I just tried this on a PC using CTRL and it didn’t work. Is this a MAC only feature?

Where we can report bugs?

:warning: Group Focus in the new engine is catastrophic! Super buggy!
:warning: Maybe is part of the first bug, but when creating reusable elements and using Group Focus as we used in the old engine is just not working properly…

1 Like

Yeah, I’d been using Bubble for a while before I discovered it, but it’s right there in the editor help menu…

3 Likes

I agree, it’s super important. I think discovered it watching videos about bubble on YouTube. Actually, @sudsy I don’t think it’s in the shortcuts list on bubble.

I actually use a Chromebook, so for my is my special “everything” button. Perhaps try using you windows key and then clicking (but it’s supposed to be the command key). I think i usually have to double click as well.

1 Like

It’s there for me - both Mac and Win…


 
 
However, I’m not entirely sure which key maps to CMD on Windows. :neutral_face:

EDIT

BTW, what’s really nifty is that it’s not just one level. It cycles through the element hierarchy with each successive click.

4 Likes

1 Like

The issue is with the containers children (your form), at 00:27 there is a splitsecond where the children group is visible, and its filling out to the right. Try setting min width to 0 and max to inf of all children elements.

1 Like

It seems re-usables created in the new engine, still out of their Group containers.

This has made my approach to building apps unworkable, as I generally stack a bunch of groups at 50px high and embed the re-usable in the group and hide & collapse as needed.

I assume this is a bug ?

[ISSUE] Why when I group two elements in a group, bubble create the new group with fixed width and convert the child elementes to fixed width too?

I tested a bit with the new engine. I guess that if you start from scratch and you have the hang of it, it will be working perfectly. But I am experiencing som major problems. If I change a complicated page to the new engine, I only see dimensions of the main containers. All other elements have no dimensions anymore, they only have minimum dimensions. So basically if I don’t have an exact copy of the page next to it on my screen I have no idea how pixel perfect the original page was.

Is this really the way? Forget about pixel perfect positions and dimensions? I can live with that but it means I have to spend days again to go through all my pages. Or am I missing something and elements do still show original dimensions?

Another feature what seems to be missing is to copy and paste the formatting. That would save tons of time. I thought it’s the copy style function but that doesn’t do anything with the formatting.

2 Likes