progress bar percentage on next line

More
6 years 11 months ago #66298 by beckers
beckers created the topic: progress bar percentage on next line
In many browsers as Firefox, Explorer (not sure about others), the "100%" text of the progress bar moves to the next line when the user sets the text smaller (zooms out, ctrl-), see attachment for a screenshot. This happes with all the templates. How can this be prevented?
Attachments:

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago - 6 years 11 months ago #66324 by machaven
machaven replied the topic: progress bar percentage on next line
Hi,

I noticed if you change the css:

#progress-wrapper #progress-post {
float: left;
margin: 0 0 0 5px;
text-align: left;
width: 40px;
}

file: limesurvey/scripts/jquery/css/start/lime-progress.css

Where width was 45px to be 40px, then it doesn't move down. (Firefox 6)
Last Edit: 6 years 11 months ago by machaven. Reason: added file location

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago #66325 by nico_8it
nico_8it replied the topic: progress bar percentage on next line
It's possible to remove it in the Template, in particular, in survey.pstpl

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago #66335 by Dennis
Dennis replied the topic: progress bar percentage on next line
This solves it, thank you!

Could this fix be included in the next version?

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago #66336 by Dennis
Dennis replied the topic: progress bar percentage on next line

nico_8it wrote: It's possible to remove it in the Template, in particular, in survey.pstpl


Since 1.91+ there is an option not to display the progress bar (Survey Settings, presentation & navigation, Show progress bar).
The following user(s) said Thank You: nico_8it

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago #66339 by machaven
machaven replied the topic: progress bar percentage on next line

Dennis wrote: This solves it, thank you!

Could this fix be included in the next version?


I will add it in :)
The following user(s) said Thank You: Dennis

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago - 6 years 11 months ago #66341 by DenisChenu
DenisChenu replied the topic: progress bar percentage on next line

machaven wrote:

Dennis wrote: This solves it, thank you!

Could this fix be included in the next version?


I will add it in :)

I test with some option, width of 40px aren't the best. ( then it break if you use Zoom text only very quickly).

I think we can use width in em, not in px. But maybe there are some better fix. ( display:inline, float ?)

:)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 6 years 11 months ago by DenisChenu.

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago #66342 by machaven
machaven replied the topic: progress bar percentage on next line

Shnoulle wrote:

machaven wrote:

Dennis wrote: This solves it, thank you!

Could this fix be included in the next version?


I will add it in :)

I test with some option, width of 40px aren't the best. ( then it break if you use Zoom text only very quickly).

I think we can use width in em, not in px. But maybe there are some better fix. ( display:inline, float ?)

:)


Thx for the suggestions, i will have a look at the options

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago - 6 years 11 months ago #66364 by DenisChenu
DenisChenu replied the topic: progress bar percentage on next line

machaven wrote: Thx for the suggestions, i will have a look at the options

I try with:
#progress-wrapper #progress-pre {width:4em;margin-right:0.5em}
#progress-wrapper #progressbar {width:15em;margin:0;font-size:12px}
#progress-wrapper #progress-post {width:4em;margin-left:0.5em}
#progress-wrapper {width:25em;padding:0;font-size:12px}

Seems to work with default template / Firefox 6.02 on Linux / Zoom in/out / Zoom in/out text only.

:)

PS: shnoulle.limequery.com/96955/lang-en for testing

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 6 years 11 months ago by DenisChenu.

Please Log in or Create an account to join the conversation.

More
6 years 11 months ago #66365 by machaven
machaven replied the topic: progress bar percentage on next line
Nice works with chrome/chromium as well.

Please Log in or Create an account to join the conversation.

More
5 years 7 months ago #91656 by dweisser
dweisser replied the topic: progress bar percentage on next line
Not sure if this will help anyone, but I was having this same problem in version 2.0.

The .css file to change was ina different place thn what is listed above: limesurvey/styles-public/lime-progress.css"

Also, the style changes I made produce the desired effect - at least in Chrome - but they are slightly different.for noob/non-coders like me, I included the original .css markup that ships with 2.0 (commented out) along with the additions I made.

/*****
Default styles for the jQuery UI progress bar
*****/

/*
#progress-wrapper {
width: 252px;
height: 2em;
margin: 10px auto 0 auto;
font-size: 12px;
}
*/

#progress-wrapper {
width: 25em;
height: 2em;
padding:0;
margin: 1em auto 0 auto;
font-size: 12px;
}


/*
#progress-wrapper #progress-pre {
float: left;
margin: 0 5px 0 0;
width: 45px;
text-align: right;
}
*/

#progress-wrapper #progress-pre {
float: left;
margin: 0 0.5em 0 0;
width: 4em;
text-align: right;
}


#progress-wrapper .ui-widget-content {
float: left;
width: 150px;
height: 1em;
text-align: left;
border: 1px solid #666666;
}

#progress-wrapper .ui-widget-header {
background-color: #AAAAAA;
background-image: none;
border: 1px solid #666666;
}

/*
#progress-wrapper #progress-post {
float: left;
margin: 0 0 0 5px;
width: 45px;
text-align: left;
}
*/
#progress-wrapper #progress-post {
float: left;
margin: 0 0 0 0.5em;
width: 4em;
text-align: left;
}

/*New addition*/
#progress-wrapper #progressbar {width:15em;margin:0;font-size:12px}

Seems to work.
-Nebraska David
The following user(s) said Thank You: arpsh

Please Log in or Create an account to join the conversation.

More
5 years 7 months ago #91676 by tpartner
tpartner replied the topic: progress bar percentage on next line
Keep this up and you're going to have to drop the "noob/non-coder" bit :cheer:

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
5 years 5 months ago #94451 by arpsh
arpsh replied the topic: progress bar percentage on next line
Thanks David - that tweak works great in limesurvey 2 with the limespired template - I have checked it in chrome, firefox and IE.

The problem had niggled me for a while, but being a 'noob/non-coder' felt ill equipped to tackle the problem - I think you did yourself down with that label! ;)

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!