Conditional and/or Workflow element sizing

It will be amazing if there was a chance to change elements, containers and form input “W H X Y” size in conditional options or in workflow. Am I the only one who wish that?

4 Likes

Hi @emmanuel - Any chance to consider this feature in near future or at all?

I can see how this might be useful for non-responsive tools, but once you start dictating element sizes like that in a responsive app, I can foresee a world where apps start looking pretty terrible. What’s your use case here?

I believe that if you take a look at both pictures you will see want I mean.
Right now I see more flexibility, better design - click on element show one element resize another.
Maybe you are right, maybe I can’t see that what I need it will create more problems and that’s the reason why I right it down here to see what will say more experience people than me.

I think this would be interesting. I have a usage logg for my app where I store user interactions to track how the user uses the app. I would like to be able to show a time line using Shapes set to the length of each interaction, this way more easily see how they use the app.

1 Like

I find it profoundly odd (responsive or not) that one cannot programmatically change element dimensions. This would greatly help with responsive layouts if ya ask me…

I constantly look at Bubble as the sort of the web-app version of mFactory mTropolis (which I wrote the book on – literally) and seemingly missing features like this are utterly vexing to me. Given that Groups are at once graphical containers, windows into other data sources and placeholders of fixed size, I can’t see why one shouldn’t be able to arbitrarily resize element dimensions. (Since, those elements might be [and probably are] contained within protected Group regions.)

4 Likes

I was just starting a new topic idea and this post here popped up, so thought I’d dig it up again on just how useful this would be. Not only functionality wise, would bring so much more to the table, but also responsively as well, making fine line adjustments. As it stands the responsive side of things in Bubble is pretty cumbersome to say the least.

We can only access parent widths when in the Responsive tab and wanting to hide an element e.g.
image
So no expressions are accessible in the elements conditions tab to apply a property change.

Otherwise we are forced into using the ‘Current page width’ which isn’t always ideal and can make it very difficult to judge how the page width will unfold when using more than a 1 column layout e.g. sidebars
image

It would be hugely practical to have a condition and be able to pull in any elements dimensions, in this case say the width. If we could do When ‘[element] width is [all number modifiers]’ and apply as a condition, it would open more flexibility in creating a fluid and responsive design I feel.

Hopefully this is a feature coming soon to Bubble, would really level up the platform.

3 Likes

I would love to have this feature, too. it would open up a lot of dynamic drawing possibilities!

2 Likes

Any news on this? I have an app that has two different modes with different sized elements and I don’t want to make duplicates of everything.

2 Likes

this feature would save many of us
I hope it comes in the next bubble update

+1 to this one.

1 Like

I think I need this, unless someone has a different solution for me. I get weekly ratings (5 point scale). I average the ratings weekly. Now I have a repeating group with a horizontal scroll. In the cell I put a shape. This shape has the color of something the user picked in their profile AND I want to set the hight based on the average score of that week.

Could these help:

1 Like

Thanks @philledille I’m not a natural regarding CSS,… I’ve been using

  1. Everything you write outside the curly braces (“{ }”) will be set as the ID. What’s inside is for adding or removing classes. So if you want your group to have the id “myGroup” and add the class “exampleClass” you’d write: myGroup{addClass: "exampleClass"} in the ID Attribute field.
  2. Yes you can define classes in the page header. You can also draw an HTML element on you page and write the classes in it. In both case, since classes are CSS and you’re writing them in an HTML space, they need to be in <style> tags:

<style>
.exampleClass {
box-shadow: 12px 12px 12px #000000;
}
</style>

  1. See above example. Don’t forget the dot before your class name otherwise your browser will think “exampleClass” is a tag name instead of a class name.

And it works,… NOW I try to modify the height and width and nothing happens.
I read that these need a !important tag to override Bubble but it’s not working.

Is there another way to set the hight?