Welcome, Guest
Username: Password:

TOPIC: progress bar percentage on next line

progress bar percentage on next line 4 years 8 months ago #66298

  • beckers
  • beckers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
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:
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66324

  • machaven
  • machaven's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 14
  • Thank you received: 2
  • Karma: 6
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: 4 years 7 months ago by machaven. Reason: added file location
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66325

  • nico_8it
  • nico_8it's Avatar
  • Offline
  • Junior Lime
  • Posts: 24
  • Thank you received: 1
  • Karma: 1
It's possible to remove it in the Template, in particular, in survey.pstpl
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66335

  • Dennis
  • Dennis's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 12
  • Thank you received: 1
  • Karma: 0
This solves it, thank you!

Could this fix be included in the next version?
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66336

  • Dennis
  • Dennis's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 12
  • Thank you received: 1
  • Karma: 0
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 administrator has disabled public write access.
The following user(s) said Thank You: nico_8it

progress bar percentage on next line 4 years 7 months ago #66339

  • machaven
  • machaven's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 14
  • Thank you received: 2
  • Karma: 6
Dennis wrote:
This solves it, thank you!

Could this fix be included in the next version?

I will add it in :)
The administrator has disabled public write access.
The following user(s) said Thank You: Dennis

progress bar percentage on next line 4 years 7 months ago #66341

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8924
  • Thank you received: 1247
  • Karma: 371
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 ?)

:)
Last Edit: 4 years 7 months ago by DenisChenu.
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66342

  • machaven
  • machaven's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 14
  • Thank you received: 2
  • Karma: 6
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
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66364

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8924
  • Thank you received: 1247
  • Karma: 371
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
Last Edit: 4 years 7 months ago by DenisChenu.
The administrator has disabled public write access.

progress bar percentage on next line 4 years 7 months ago #66365

  • machaven
  • machaven's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 14
  • Thank you received: 2
  • Karma: 6
Nice works with chrome/chromium as well.
The administrator has disabled public write access.

progress bar percentage on next line 3 years 4 months ago #91656

  • dweisser
  • dweisser's Avatar
  • Offline
  • Gold Lime
  • Posts: 222
  • Thank you received: 5
  • Karma: 5
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 administrator has disabled public write access.
The following user(s) said Thank You: arpsh

progress bar percentage on next line 3 years 4 months ago #91676

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5899
  • Thank you received: 1291
  • Karma: 520
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.
The administrator has disabled public write access.

progress bar percentage on next line 3 years 1 month ago #94451

  • arpsh
  • arpsh's Avatar
  • Offline
  • Premium Lime
  • Posts: 23
  • Karma: 0
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! ;)
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.257 seconds