Is there any action to change element dimensions?

Questions
1

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

2 Likes
2

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

image
image575×883 22.5 KB

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';
  }
}
11 Likes
3

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!

4

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
5

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

6

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

2 Likes
7

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
8

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

9

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

1 Like
10

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.

11

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

Thanks!!

12

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';
  }
}
13

Try replacing what you have with this

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

14

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’

15

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
16

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

Thank you so much for your help.

1 Like
17

Hi!

Quick question, is there a way to make the “256” a dynamic value equal to the width of another element?

How would that code look like?

Thanks!

18

Well, when you say “dynamic” do you mean like using a bubble condition inside that piece of code?

So something like this for example?
image

If that’s what you mean then you’d have to find a way to get that second value into bubble, which you could do using the Toolbox Expression or JavascriptToBubble elements I guess.

However, if you just want to reference another element with another attribue ID assigned against it.

You may be able to do something like…

var first_element = document.getElementById("myAttributeID_1");
var width = "" + first_element.style.width + "px";

var second_element = document.getElementById("myAttributeID_2");
second_element.style.width = width;

If you’re using the new responsive engine, you may have to change style.width to style.clientWidth (same for height, replaced with clientHeight).

19

I am getting an error saying:

Uncaught TypeError: Cannot read properties of null (reading ‘style’)

I am assuming that this is happening because the element I am trying to change is part of a larger group that is initially not visible on the page. Through the workflow, it becomes visible before I run the Javascript, but it is still giving me the error.

Anything special I need to do here?

20

Yes so it could because of that or because you’re using the new responsive settings page, I think some bits changed. Need to test it inside the dev tool console once you’re page is loaded.