Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Aligning the text

When I use the above command, the value is shown below the progress bar; center justified. However, I would like to change and place it in the middle of progress_bar_inner; center justified. Can somebody please help
related to an answer for: Manipulating the progress bar
asked Aug 17, 2020 by Sonal Budhiraja

2 Answers

0 votes
Best answer
Does this suit your needs?

.progress_bar_inner {
    text-align: center;

.progressSpan {
    color: white;
    font-size: 10px;

    var inner = $('.progress_bar_inner');
    var progress = $(inner).attr('style').replace(/[^0-9%]/g, '');
    $(inner).append('<span class="progressSpan">' + progress + '</span>');

The color and font size can be adjusted in the CSS near the top.
answered Aug 17, 2020 by Zachary Platinum Sawtooth Software, Inc. (177,175 points)
No, I tried updating this. But can't see the values.
Hey we could work with this code after minor changes. Thanks!!
Can you share your .ssi with support@sawtoothsoftware.com so I can better see what's going on?
0 votes
Hi Sonal,

Please try using below script:

    var outer=$(".progress_bar_outer").width();
    var inner=$(".progress_bar_inner").width();
    var percent=Math.round((inner/outer)*100);

    $("td.middle_cell").append("<table class='val'><tr><td>"+percent+"%</td></tr><table>");

Rahul Mittal
answered Aug 18, 2020 by Rahul Mittal Gold (11,635 points)