Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Help with moving the progress bar

  • davebostockgmail
  • davebostockgmail's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
3 years 1 month ago #212965 by davebostockgmail
Help with moving the progress bar was created by davebostockgmail
I was wondering if someone could tell me how to move the progress bar into the top container.
The current template is the fruity one and I have attached an image of where I would like it to go.
This would hopefully then move the question up on the page as well.

I am not up to speed with TWIG templating so any help is appreciated.

Version Version 3.25.1+201124
Theme : LimeSurvey Fruity Theme with some CSS customisation for question appearance
Attachments:
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 1 month ago #213350 by Joffm
Replied by Joffm on topic Help with moving the progress bar
Hi,
I moved the content of "progress_bar.twig" to "nav_bar.twig" with one change betweemn the logo and the "save", "clearall", etc. links.
I changed "container-fluid" to "container"
Code:
{# do not show on "completed/thank you page" page #}
{% if not aSurveyInfo.aCompleted %}
    <!-- Top container -->
    <div class="{{ aSurveyInfo.class.topcontainer  }} space-col"  {{ aSurveyInfo.attr.topcontainer  }} >
        <div class="{{ aSurveyInfo.class.topcontent  }} container" {{ aSurveyInfo.attr.topcontent  }} >
            {% if aSurveyInfo.format != 'A' and aSurveyInfo.showprogress is defined and aSurveyInfo.showprogress == 'Y' %}
                {{  registerPublicCssFile('lime-progress.css') }}
                {% set progressValue  = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %}
                <div class="{{ aSurveyInfo.class.progress  }}" {{ aSurveyInfo.attr.progress  }}>
                    <div class="{{ aSurveyInfo.class.progressbar  }}" {{ aSurveyInfo.attr.progressbar  }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;">
                        {{ progressValue }}%
                    </div>
                </div>
            {% endif %}
        </div> <!-- must hide it without javascript -->
    </div>
{% endif %}

 

I know there is a bit more styling necessary.
But it's something to begin with.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: davebostockgmail
The topic has been locked.
  • davebostockgmail
  • davebostockgmail's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
3 years 1 month ago #213381 by davebostockgmail
Replied by davebostockgmail on topic Help with moving the progress bar
Thank you so much Joffm ... this has done the trick.

I can work with the CSS from here.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose