Forum Academy Marketplace Showcase Pricing Features

Is there any action to change element dimensions?

Is there an action, for example, to change the width of an image when you press a button?
Cheers!

1 Like

Not that I’m aware of through Bubble directly, but you can do this…

In your element which you’d like to change the width of, give it an element ID as shown below

Now have the button which you’ll click to change the width, run a workflow.
In that workflow create a ‘Run javascript’ action that has the following in it.

document.getElementById("myGroup").style.width = "300px";

Change your width value to what you need and that should do the trick.


Or if you want to animate the width, you could replace that JavaScript with this instead.
Set the 141 value to the starting width of your group. If it’s a fixed width then it should be fine, if not then it might need tweaking. I was trying to set the width dynamically with the line below but I didn’t get that working.

var pos = elem.style.width;

var elem = document.getElementById("myGroup");

var pos = 141;
var id = setInterval(frame, 5);

function frame() {
  if (pos == 300) {
    clearInterval(id);
  } else {
    pos++;
    elem.style.width = pos + 'px';
  }
}
8 Likes

Hi @pork1977gm,
Awesome work around thank you.

Now I have newbie question as I am new here and don’t know javascript at all.
how to:

How do I run a javascript in a workflow? Don’t know how to do that either.
Cheers!

Oh sorry, forgot to say. Go to the plugins and find one called “Toolbox”
It will give you the option to run javascript action like this.
image

1 Like

Hi @pork1977gm,
That is fantastic!
Completely sorted out my ptoblem.
Thank you so much!
All the best!
Cheers!

Ah that’s good to hear, no probs at all :slight_smile:

2 Likes

Is it possible to change the width and height based on column values used in a database with this javascript function:

document.getElementById(“myGroup”).style.width = “300px”;

…and replace the “300px” for a number specified column in the database and/or from input fields? A sort of lookup function…? Is this possible?

1 Like

Hi, I was just browsing the forum for a solution like yours here: Is there any action to change element dimensions?

Thanks for this! I have one remaining question: I am interested in the simpler solution (document.getElementById(“myGroup”).style.width = “300px”; ). I use it to make a sidebar. But when I do that I have essentially two problems:

  1. The content inside the sidebar keeps its original width
  2. The content to the right of the sidebar (the main content groups) don’t expand into the now empty space

Are you aware of any solutions for this?

Regards, Fabian

Replace the 300px with a condition to lookup the values if you have them stored. Something like “Do search from etc…”

1 Like

I would take a look at that side bar’s responsive settings, if you can do what you want using Bubble’s responsive settings it will probably be a better option.

Although modifying the DOM styles on Divs can be useful at times, it might not be so useful when you have groups in groups because it effectively only modifies the width of one of those via it’s Id.

Saying that, there will be a way I’m sure, I don’t know off the top of my head right now.
Maybe if I can see what you have, I could take a look and figure it out.

Damn…really that simple… Worked like a charm! :star_struck: :muscle:

Thanks!!

I’m trying to resize a drop down based on its inputs.
I’ve tried to use the suggested approach but I’m going wrong somewhere, or is this the wrong apprach?

I want the input to go from 528px to 256 if a certain input is chosen.

  • I have a dropdown that is named: ‘Dropdown ColorSetting’
  • The drop down has an option called: ‘shrink’
  • It has an ID Attribute: ‘colorPicker’
  • I have a general workflow that does something when a ‘Condition is true’ which is set to do something when ‘Dropdown ColorSetting’s value is shrink’.

Finally I have the run javascript workflow with the following:

var pos = elem.style.width;

var elem = document.getElementById("colorPicker");

var pos = 528;
var id = setInterval(frame, 5);

function frame() {
  if (pos == 256) {
    clearInterval(id);
  } else {
    pos++;
    elem.style.width = pos + 'px';
  }
}

Try replacing what you have with this

var elem = document.getElementById(“colorPicker”);
elem.style.width = “256px”;

I replaced all the Javascript with above, but dosen’t do anything to the dropdown width.
I inspected the workflow and its running everytime I select ‘shrink’

Ok, so make sure you have the attribute ID field set to “colorPicker” and I’ve just noticed the formatting of the double quotes in that code, maybe try this instead

var elem = document.getElementById("colorPicker");
elem.style.width = "256px";
1 Like

Ahhh beautiful, that worked.
It was the double quote formatting that was the issue…

Thank you so much for your help.

1 Like