web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Power Pages - Design & Build
Suggested answer

Multistep Forms: Fit progress indicator to form width

(0) ShareShare
ReportReport
Posted on by 42
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:
I have the same question (0)
  • Suggested answer
    CBDEV Profile Picture
    42 on at
    Multistep Forms: Fit progress indicator to form width
    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.
  • CBDEV Profile Picture
    42 on at
    Multistep Forms: Fit progress indicator to form width
    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.
     
     
     
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

MS.Ragavendar – Community Spotlight

We are honored to recognize Ragavendar Swaminatha Subramanian as our September…

Leaderboard > Power Pages

#1
Jon Unzueta Profile Picture

Jon Unzueta 87 Super User 2025 Season 2

#2
Fubar Profile Picture

Fubar 55 Super User 2025 Season 2

#3
Shafiuddin Profile Picture

Shafiuddin 45

Last 30 days Overall leaderboard

Featured topics