Stepped progress bar Set Size Across adaptive views

#1

I have a wizard form process where the user can see their progress filling out the form by a colored bar animating to a step number.

This all works fine as i’m using Set Size to give the bar a pixel width which animates it to the relevant step the user has navigated to.

The issue arises when a larger or smaller adaptive view is activated as the pixel widths of the bar no longer are accurate to the width of the container.

Is there a way to Set Size to a percentage of an element width? or a way to have a different set of interactions for different adaptive views?

#2

You can use local variables to access the width of whatever you’re referencing (say, the total width of the coloured bar) and then divide it by 2, 3, 4 etc to get appropriate segments.

Change the ‘set size’ interaction to ‘value’ and then add a local variable that points at widget ‘MainBar’ or whatever you’ve called it and set the size of the X value to [[Mainbar.width/3]] or however many segments you have.

#3

@davegoodman Thank you kind sir! Took a bit of fiddling on each state but it worked well.

Is there a way to split divide the total width past /2?

I found a solution which was [[Mainbar.width/6*4]] . It divides by the total number of steps then multiplies that width as a segment. I thought there would be a way to define a more accurate percentage width. e.g [[Mainbar.width/37%]] … Something like that possible?

Thanks again

EDIT: This has some related information on setting width with local variable. Using local variables, This, and Target

#4

You should be able to just divide it by the total number of segments. Like if you want to set it to a quarter of the length of the total container, you would just do [[Mainbar.width/4]]. However I haven’t tested this.

closed #5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.