Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine Feature Request

I do it to change the values of groups I use in pagination, as my pagination has several conditionals at times to make a number value at certain stages of the pagination be ‘…’

I just change the datasource of the group (being a number) conditionally…I used this as a more refined approach to having conditionals on workflows, as needing workflows on conditionals still required conditionals on the text to change from ‘2’ to ‘…’

1 Like

I like it. I’m all about leveraging Bubble’s “reactive” capabilities and reducing the number of workflows. :+1:

This seems to be a limitation with the input itself, since it doesn’t seem possible to do this natively with browser css. We would have to implement some javascript to replicate the behavior, but we’ve been hesitant to do so given the issues we have with the multiline input (which relies on js resize handlers for height). If its doable with css, however, it shouldn’t be a difficult add.

2 Likes

@nickc maybe not 100% based on the new flexbox, but definitely related to design.

In the conditionals on the styles we have access to a few options such as ‘this element’, ‘current page width’ ‘current scrolling position’.

It would be a great add to get the ability to reference a URL parameter here.

Additionally for conditionals and styles is to get access to ‘container width’ and ‘element’s width’…having these values would enable ability to create styles that are responsive. My thoughts are containers that can change their padding values conditionally based on the container element itself width (when this element’s width is…) and this would then be combined with a text element that has conditional settings for the container width to change the font size (when container width is…)

I’ve run into a need for these on several designs over the last two weeks.

1 Like

@nickc would love to have a conditional access to ‘fit width to content’ and ‘fit height to content’ which are just checkboxes in layout tab, but there is no conditional access to change that. Would really benefit having access conditionally to basically every single layout property.

3 Likes

Shouldn’t be too difficult to add, noted. Curious, what is your use case for conditional statements on these two settings?

There have been times over the last couple of days when building client apps in the new responsive editor that I have wanted to use by default a fit width to content or a fit height to content and then based on a page width conditionally change that.

Most of the time it is based on something like a text, which when fit width to content is checked, and the length of characters is too large to fit all of the content on one line when the page is collapsed, and I don’t want an ellipsis added, I’d like to uncheck conditionally the fit width to content to have it break to another line, and in some designs there are other elements on the same line as the text element that interact with it’s width settings.

I honestly would LOVE to see a property to change just simply be Layout and have every single layout property to change. I find myself often having to change multiple layout properties and it would be so much easier to just see all of the layout properties at once as it would greatly reduce my back and forth between the layout tab and the conditional tab to check with layout properties I need to change based on the conditional dynamic expression, especially when doing multiple page breaks. Plus having access to all layout properties conditionally will help dramatically, whether or not as just one property or just individually.

Been building a lot of cool stuff with it and find the new responsive editor fantastic and it has opened up so many possibilities that used to not be possible. Just a few more things to access conditionally and I think the sky is the limit to what we can do…well, as soon as we get a height and width setting that is a ‘calc’ function of 100% +/- px value.

1 Like

No feature request - just some inspiration for the editor from the new flexbox version of elementor.

Test it, play around - maybe the team finds something cool.

https://playground.elementor.com/demo/flexbox/?utm_source=Elementor&utm_campaign=ad60097a45-Live_Show_FlexBox_07.04.22-Reminder_Pro&utm_medium=email&utm_term=0_34c18994e0-ad60097a45-140496926

1 Like

Appreciate the feedback. We’d love to open up all of the layout options in conditional statements, but there are some limitations based on our current implementation & property editor UX. We are looking into ways to enable this - in the mean time, we have fit width & fit height noted for future consideration :slight_smile:

2 Likes

@nickc Having a conditional access to change the property on repeating groups to allow us to conditionally change the number of rows and columns would be great…as well as conditionally change the min width of columns and min height of rows.

A use case is custom calendars where the number of rows needs to change based on the number of days in the month as they fall (sometimes a 7x5 is needed, while other times a 7x6 is needed)

One thing that might make it so these features wouldn’t really be necessary is if the repeating group, when the min height of a row is set to 0px or 0% that the cells height becomes equal to the height of the repeating group divided by the number of items in the datasource. For example, I have a repeating group set to no min height and no max height (basically take up as much height as available), and this works fine for the repeating group itself to fill the entire container height, however, the cell’s heights do not track this setting in that, I have 35 items in the list, but the cells heights do not take up all available space, and the repeating group has 1/2 of it’s height taken up.


So basically, the repeating group cell height should function like all other containers function, in that when the min height is 0% it takes up as much height as available.

3 Likes

Thanks for flagging - this has come up quite often. Logging for consideration as bandwidth allows!

3 Likes

+1 for this feature

1 Like

+1 for this feature

1 Like

+1 for this feature

1 Like

+1 for this feature

@nickc

On the groupfocus element there is not a function to fit width to content or fit height to content. It would be nice to have those functions on the groupfocus element.

Would also be nice to have an ability to change between offset left or right. I usually use the groupfocus element associated with sorting options, and the reference element is the text element that displays the currently selected sort option, which has the width set to fit content, so the width is dynamic. At present the offest left only option means it is always offset left, and if set to 0 it lines up perfectly with the left of the reference element. However, for me, my designs always have the sort option on the right of the screen, so when have a dynamic width on the reference element, and the width of the reference element is greater than the groupfocus, the alignment is off as it naturally looks better to be right aligned if the reference element is on the right of the screen.

1 Like

@nickc Having a padding setting on a text element for the purposes of setting a padding compared to the background, much like the function on the button element.

There are a lot of times in my apps I use the text element instead of buttons because I can add icons to the text element but not a button. The feature on the button for padding is great, and I personally would love to see the same on a text element.

This will be out quite soon :slight_smile:

2 Likes

@nickc is it possible to get the image layout setting of aspect ratio to be available conditionally? Would like to be able to make conditional changes on this as a smaller device size would display better with a different ratio than what is set for larger devices.

1 Like

Hi @nickc,

Adding my vote to @boston85719’s request for the ability to conditionally fit height/width to content. Is there any chance that this is coming soon?

1 Like