New Responsive Engine Feature Request

Noted!

@nick.carroll

Could we get on the group focus element an option to set the offset value to be offset left/right?

When using the group focus element on a header for a drop down menu and the reference element is right aligned it becomes a cumbersome task to try and guess what the left offset value should be, especially when the reference element itself is dynamic in it’s width.

Screen Shot 2023-01-09 at 5.10.37 PM

The drop down menu is set to offset 0…if it was right aligned, instead of the default and only choice of left, the offset would allow the group focus to not go off the page.

I think a simple toggle for choice of ‘offset left or right’ would be a great addition.

2 Likes

+1 on this one, need it right now :slight_smile: ping @nick.carroll :face_with_hand_over_mouth:

image

Neef to change offset left on conditionnal page width :slight_smile:

1 Like

Dynamic value for grey out colour would be really helpful!

Left / right align options for group focus offset us on the roadmap!

3 Likes

@nick.carroll Would it be possible to conditionally change the fit width to content and fit height to content settings? I’m currently trying to create an element that when the fit height to content is unchecked, it looks as I need it on desktop, but for my mobile view, I need the fit height to content checked. If it is checked the entire time, the desktop view doesn’t display the element

Bump +1 @nick.carroll

I’m in desperate need of a ‘if current page width <= 640’ uncheck the fit width to content option…

Noted!

1 Like

@nick.carroll If we could get the element margin and padding values exposed in the same manner the height and width exposed that would be a great addition. Trying to get some dynamic height elements to fit into a space, and not needing to hardcode a bunch of conditionals based on changes in other elements margins/paddings would help.

For example, I have a design to keep everything on a page (ie: no scrolling) and to fit in the center elements whose heights are dynamic and change based on the height of other elements (header changes height) and their margins (margins changed based on page width) I can access the header height but not the margin value for other elements.

2 Likes

Noted! cc @kate.mcnally

@nick.carroll is it possible to get a transition for the alignment…looking at transitions it seems to be the only layout choice that is not already included.

I’d like to be able to show a transition on a change in layout for an aligned to parent child element. Basically making a text move position from left center nonant to the left top nonant.

1 Like

Noting this down!

1 Like

Dynamic widths would be great. For example, if I have a group focus (that is shown right underneath the element to focus, such as a menu) 99% of the time I want the group focus to be the same exact width as the focused element.

Elements are responsive nowadays, so the focused element’s width changes. However, since the focus group sits on top of the rest of the content, it’s width will never change. This leads to really janky conditions.

Since width and height are exposed on every element now, it would be cool if when I clicked “px”, instead of only seeing px and %, I could also see a “dynamic width” option that let me select an element on the page to match it’s width, or height for that matter.

Thanks!

1 Like

I agree that would be great. In the meantime there are ways to achieve this with some custom code or a plugin. There are a couple of them on the market, only one of which I can vouch for it’s effectiveness.

For the custom code, you would use

<style>
#element-id {
min-width: 'element to match width'px !important;
width: 'element to match width'px !important;
max-width: 'element to match width'px !important;
}
</style>

I use it in my apps all the time. I used it recently to create a custom dropdown.

Screen Shot 2023-10-06 at 12.41.53 AM
Screen Shot 2023-10-06 at 12.41.37 AM
Screen Shot 2023-10-06 at 12.41.23 AM

You can apply this as well to get dynamic heights to match other element heights.

4 Likes

@nick.carroll Could we get the ability to set the column and row gaps on repeating groups?

Would make spacing our elements so much easier as we would not need to add conditionals on elements inside of the RG to account for alignment with other page elements. I always have to add some condition to change the margins (which are normally margins on the right) so that the elements inside of the RG align perfectly with all other elements on the page.

The idea is that on the page I use margins to set distance at around 20px from the sides of the page. When I have an RG and I set the margins on the right of the elements within the RG to give them space between each other I then have to do a condition to make it so the cell’s on the right side of the RG (and therefore page) do not have the right margin, so that they will align with all other page elements. Sometimes it is simple, others times it requires too much math.

Would be great to just simply put a gap value and have it automatically adjust distance between cells.