New Responsive Engine Feature Request

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

9 Likes

Great news :slight_smile:

That’s great!

:clap: :clap:

Great to hear

@nickc it would be great to have a conditional on the image element to allow a conditional change to the aspect ratio, as well as to remove the ‘keep aspect ratio’ setting.

1 Like

@nickc it would be great to get back the function to click on an element in the responsive editor and see the size of that element. In the legacy engine we had the ability to click an element and in the left side see the size of that element. In the new responsive engine this is just as important to assist with deciding what types of conditionals we need based around the size of child elements at different page widths.

Would also be incredible to get the ability to set a conditional expression that is ‘container width’ rather than always having to reference the page width. Would make things much simpler to decipher when we put a conditional into effect.

3 Likes

@nickc would be nice to have a conditional and a setting on child elements of a row container to position them horizontally centered. Right now working with a row container that has 3 child elements, that will ‘stack’ when the container width is collapsed, those child elements are by default set to the left side of the container (since it is a row there are no horizontal position options)…It is too cumbersome to attempt to set a margin on each child element to try and maintain a horizontal center.

1 Like

@nickc would need to have a conditional property to change of the ‘fit width to content’…currently this is not available and when we conditionally change the width of the element to be 100% the ‘fit width to content’ that is set on the element layout tab overrides the conditional of min width 100%.

3 Likes

I definitely appreciated this functionality, but my understanding is that it’s not possible without JS, yet.

There is some experimental work being done with CSS container queries which would help solve this with pure CSS, but am yet to see how it intersects with flexbox.

It would seem that in many instances the min and max widths within flexbox would help you achieve most layouts but it may be that some edge cases require something like container queries to execute properly.

2 Likes

@nickc It would be ideal to in the conditional tab have an ability to select the property to change as “layout” and have access to every single control in the layout tab without needing to set individual properties for each individual property.

Reasons:

  1. Need access to every single layout property conditionally to get the most control over the design without needing to resort to custom CSS or having duplicated elements that are visible/not visible at different times. Things like the make first, make last controls are just as essential as the margins. Being able to change conditionally the container layout type would be a huge benefit as well.

  2. Since all these new controls interact with each other and some override the others, it would be so much easier to set up our conditionals if we could see all of the layout properties at once and decide which to change, rather than having to set each property individually and constantly check the original layout settings to see how they may interfere with the conditional settings or see which other properties need to be adjusted.

As of now I still don’t see a way to change the order of vertically stacked groups when the layout container is row and the child elements break to other lines to say the element on the right of the row should stack as the top element when the elements are breaking to the next line.

3 Likes

Put the parent element dropdown on the layout tab

1 Like

Not exactly new responsive engine but if there was a feature where you can have lookup field like in airtable that would solve so much data consistency and advanced filter issues

It would be great to have ability to “copy/paste layout properties” of elements. Many many times I copy the properties across, especially while creating a table that has many columns.

1 Like

What would be even better is if we could have the layout properties be added to styles. Would be awesome to create styles for things like containers that have set padding.

6 Likes

Right. That’s precisely what I wanted, but felt that probably copy-layout-properties might be simpler for them architecturally.

+1 to this.

@nickc it almost seems essential that the groupfocus have a setting to determine in which direction the groupfocus height will expand.

When setting a groupfocus element to have a reference element that is at the bottom of the page and we want to the groupfocus to basically be above the element at the bottom of the page, but to allow that groupfocus element height to change as a percentage of the page height, it is not possible to get the type of design one would expect, which is have the groupfocus element to increase it’s height toward the top of the page. Instead the behavior is that it expands its height downward, causing the element to expand it’s height down and off the page.

also to be able to conditionally change the offset top and left values would be a huge benefit as well.

BTW, I can achieve the desired design using a floating group that is set to float relative to bottom, but in certain circumstances would prefer to have use of the groupfocus instead.

@nickc on the image element if it is possible to allow us to set the aspect ratio based on height or width…currently to keep an aspect ratio we can only set the width which will automatically make the height according to the aspect ratio. If there was a setting to say set the height and automatically adjust width based on aspect ratio that would give more flexibility.

@nickc if we could get on an input element the width setting when not using fixed width the ability to set width to content. I use input elements and format them to look like text. I do this for various reasons such as displaying the values of shopping carts and use those values in the inputs as part of simple calculations.

4 Likes

I learned a neat trick sometime back where I don’t have to use text as input element for me to use it in calculations. Create a group, make its content as “number” and make the content of the group to be what you would want the value to be, e.g. shopping cart value here.

Now that group’s value can be used for calculations or for displaying as needed.