New Responsive Engine Feature Request

[davidscott.pal]

Thanks for putting this thread together.

Some other points:

• can we show the current element pixel h/w, since we’re not drawing anymore we don’t really know the pixel dimensions
• can we expand the properties available to us in the conditionals tab? I’d love to have more controls conditionally.
• it would be great to allow plugins to load on a page without taking up space for responsiveness
• also would be great if font size can auto scale between two endpoints
• can we have control over whether a group allows for overflow?
• can we control the z-axis for floating groups so that there is similar responsive behavior between those floating groups as if they were flat on the page.

[jeroen]

Adding the current right click menu on an element to the element properties (popup) window would be great. This way the ungroup action (and all other actions) is always available, even when an element is hidden by another element. Maybe via a button in de window bar to open the menu (see mockup in picture)

[jeroen]

Would be great to have the new responsive properties on an element as options in the Conditional tab. Forinstance when displaying a website on a small device I would like to change the Container Alignment from Left align to Centered

[boston85719]

Yes…I think they need to give us access to every property from the layout tab in the conditionals. Only then would this new responsive engine have been worth it, because without them we are very limited in what we can actually achieve.

[zachary.dorsch]

Feature Request

CC: @nickc

When using the responsive engine, it would be nice to be able to see the current dimensions of a container.

This would be helpful during the build stage so I can set correct max and min heights of similar elements.

[boston85719]

It would be great to have a setting onto container elements that would be an input giving us control over when the container initiates a ‘page break’…I know Bubble has an intention of releasing a feature related to page breaks, and I personally think it is likely going to fall short on functionality.

From my understanding at the moment is Bubble intends to give us only the ability to set page breaks at 320, 768, 992 and 1200…giving us only access to these 4 is going to pigeon hole us unnecessarily. The same functionality can be provided by giving us control through an input what px value we as the developer want to use. Looking across the world wide web, there is no one size fits all page break, and even looking at individually pages across a website, there is not a one size fits all page break.

One of the main reasons I think it would be necessary to put this onto the container level, and not just the page level, and to give us an input to set that px value instead of pre-determined 4 choices is that as we now have the great ability to create containers on a page with a specific layout style, the correct approach in my mind is to treat each container as separate entities with their own design needs. I could have on the same page two different containers that I want to have their contents based on the content sizes break lines at different points…and this should not be based on page width only, but give us ability to set it based on container width as well.

Another reason is that today I saw a post for help in achieving a design with two images whose min width settings and the desired container break px value did not allow for the behavior the user wanted.

My response with a video to help likely did not get the exact design since the only approach possible at the moment is to set large margin values which likely is not desired.

[gerbertdelangen]

Agree, as a temporary solution you can activate “Show distances on hover” in the top-right menu “Grid & borders”, but you might already know this.

[boston85719]

Yeah, at the moment when in the responsive tab you can click onto an element, then move your cursor away from it and then hover it again to see the dimensions…not the most intuitive or user friendly way to show it.

I personally don’t know why they removed the details we have in the original engine as they are not doing anything with that space created by removing it.

[mghatiya]

On the point of moving an element from one group to another: Drag and drop doesn’t work when the destination group is of a smaller dimension. And one can’t simply drag and increase the width and height of groups either. It requires elaborate change of width/height, which you may not want or may not do accurately at one go.

Even if this is fixed, it would be of great help. Just make it possible to drop an element or group to a smaller group too.

[nickc]

The video doesn’t seem to be loading, do you have it somewhere else perhaps?

[nickc]

Your second request has been addressed. Groups in a column will stretch to their max width if “fit width to content” is not checked and alignment can be specified. Thus, there is no need to use the horizontal stretch if and alignment is required at a certain max width.

[boston85719]

I just sent Loom a bug report. Was working previously.

[gerbertdelangen]

FYI, copy-paste or cut-paste an element into another element seems to work (wether the destination element is smaller or not).

Steps:

1. Select the element to be copied/moved
2. Press Ctrl-C or Ctrl-X
3. Select the destination element
4. Press Ctrl-V

[mghatiya]

I am aware of this. But this doesn’t work when there are references of the element and workflows at places. Yes, there is “copy with workflows”, but that doesn’t take care of references. We have to manually find out all the references and update them, and then delete the original element. Quite error prone too apart from being bit of an effort.

[mghatiya]

When a group is marked as row layout, the children element only have options of aligned vertically within them i.e. top, bottom, centre

When a group is marked as column layout, the children element only have options of being aligned horizontally. i.e. left, right, centre.

That seems limiting. Not sure why would these restrictions be required. In a row I do feel a need to have an element right aligned all the time. Similarly in a column too there is a need to tell an element to be on top/bottom all the time.

Can this be changed?

[boston85719]

This video is back online. Loom has been helpful in resolving the Bug in their system.

New Responsive Engine Feature Request

First request I would add here is to bring back to the text element the shrink elements height option, but could be used a bit differently than it had in the past. To demonstrate the use case I made a video I personally feel it would enable use to incorporate responsiveness, page breaks etc. in our Styles, specifically on Text elements.

[boston85719]

@nickc If we could get a conditional onto the group focus element to change the offset top and offset left so that we can change the relative position to the reference element that would be great.

The main issue is that when using a group focus element that is referencing an element at the bottom of the page, if the group focus is shown and it’s height is great enough, it can be cut off by the bottom of the page, requiring added space to the bottom of the page just to ensure the group focus is fully visible.

Currently in a design I need to add 160px to the bottom of the page of just dead space, only for the event when the group focus might be visible. If I could put a conditional to change the offset top, I’d be able to eliminate this need for dead space and get a cleaner design.

[nickc]

Noted - we have some higher priority features in the queue but additional alignment controls are certainly possible with the new engine.

[sarabeth]

Ability to collapse an element’s height if hidden regardless of the Parent Element’s Layout type. (Correct me if this is a thing, can’t find the option to do this for a Group within a Fixed element.)

[nickc]

We just deployed the ability to drag and drop in the elements tree. This should make it much easier to re-parent or re-position elements in the new engine! New Responsive [beta] Drag and Drop in Elements Tree