Stepped progress bar Set Size Across adaptive views

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?

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.

@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

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.

1 Like

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