I have released a plugin that allows you to set the height and width of an element using a dynamic expression. With the plugin it is also possible to set the width or height of an element to match the height or width of other elements.
Additionally you can set the width or height of an element using two different values. For example, in my apps I often need to have a header element and then I want an element to take up the entire height of the viewport while maintaining some space at the bottom. With this plugin it is possible to consider the height of the header, the space needed at the bottom so that the element only takes up as much height as is the remainder of the entire viewport height less the header and space needed.
Editor Height Demo: Demo-plugins-for-marketplace | Bubble Editor
Editor Width Demo: Demo-plugins-for-marketplace | Bubble Editor
5 Likes
@boston85719 Hey!
I’ve been looking for such option! thanks.
Could you post the guided steps to setup the plugin? I couldnt understand fully how it operated just by the demo page
1 Like
I would recommend using the New Height or New Width elements as they have more variable possibilities (up to 5).
When you put the New Height element onto the page you need to add an ID and also use that same ID as the HTML ID attribute on the target element.
Then you set the first value to the initial px value you want to use, then choose an operator (either - or +) and set the second value…if for example you set the first value to the page height which may be 980px and then use the operator (-) and the second value is set dynamically to the height of another element, such as the Header on the page which may be 60px, the height of the target element should become 920px (ie: 980px-60px).
So the different values and different operators allow you to create a math formula to determine the height or width of the target element.
There is also a new element called New Margin Top, that will allow you to do the same thing, except it is not setting the height or width of the target element, but instead is setting the Top Margin of the target element.
There is also an element called Page height, which will get the height of the page but also cause the page to not be scrollable. This element is not necessary to be used, and can cause some confusion if not understood that it will make the page not scrollable.
Hope this helps.
@boston85719
Thanks!
Would that setup work inside of a repeating group?
I want to change the width of elements inside each cell of a repeating group
Im using the maestro plugin for running workflows inside the repeating group’s cells
If you put one of the plugin elements inside of the repeating group and make sure you set the HTML ID attribute on the target element with a dynamic expression to utilize the RG cell index number, as well as for the plugin element ID field.
What is the specific use case? The plugin might not be needed to change the width, and you may be able to use Bubble default width layout settings. Let me know what you are specifically trying to achieve and if you have an example screen shot to share that would be helpful too.
What is the specific use case?
The use case is this: I’m creating a visualization of the hours a users was training (in green, in the app). Every row represents one day. I want to be able to “strech” a workout time to fill in the proportianate time of the day so that if it was one hour, or 3 hours, that would fill the proper width.
To do so i begin with positioning the workout in the right time of the day using a Dynamic position plugin. The plugin puts the workout in the righ start time of the day.
Then I need to strech the workout width. To do so Im trying your plugin.
Im doing this in an Repeating group so it gets a bit messy…
Would love to hear better ideas…
Thanks again!
I don’t have one for this use case…sounds like with the combination of the Dynamic Position plugin and the Dynamic Width plugin you may get your desired design…however, it will become even messier if the design is supposed to allow for multiple events that have time ranges that overlap each other. But if only ever one event will take place over a specific time frame, it sounds pretty straight forward with the use of the two plugins as you mention.
1 Like
Yes there will be no overlapping.
Thanks I’ll try it out
