Multistep Forms: Fit progress indicator to form width

(0) Share

Report

Posted on by CBDEV

Hi all.

After some user review I have been asked to update a Multistep Form , so the progress indicator at the top of the form matches the total width of the multistep form, this is how it looks right now since this is the default design:

I have been trying to update a custom *.css after identifying with the developer tools in the browser the progress indicator ID like <div id="WebFormControl_03a29cb7c04244009ddced8b3c4bd1e2_ProgressIndicator"> , then with some help of AI I got this code (partial code) I uploaded the custom *.css file to the styles in the design view:

But I have no success, I am wondering if you have deal with similar changes and if I need to override other CSS or what do I need to consider to have this change implemented.

I really appreciate any suggestion,

Best Regards,

Carlos.

Categories:

Design & build

I have the same question (0)

All responses (2)

Answers (0)

Sort by

CBDEV 60 on at

Like (0)

Report
Copy link

Link copied!

Hi Just to update that after checking carefully with developer tools in the browser I realized these padding-left and padding-right styles for the .row containing the progress indicator makes the progress indicator not to fit the width of the Multistep form:

I have added a a custom *.css for the form and now is fitting the width , I am testing to optimize the CSS so I can post a validated code.

Regards,

Carlos.

Was this reply helpful? Yes No
Suggested answer

CBDEV 60 on at

Like (0)

Report
Copy link

Link copied!

Hi,

Just the optimized CSS code to adjust the progress indicator width to fit the form. After some testing with only these lines on the custom CSS for the Multistep Form it will be enough:

Best Regards,

Carlos.

Was this reply helpful? Yes No