New Responsive Engine Feature Request

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?

1 Like

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

@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.

4 Likes

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

4 Likes

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.)

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.