Welcome, Guest
Username: Password: Remember me

TOPIC: progress bar percentage on next line

progress bar percentage on next line 4 years 4 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 4 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 4 months ago by machaven. Reason: added file location
The administrator has disabled public write access.

progress bar percentage on next line 4 years 4 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 4 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 4 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 4 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 4 months ago #66341

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8194
  • Thank you received: 1117
  • Karma: 331
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 4 months ago by DenisChenu.
The administrator has disabled public write access.

progress bar percentage on next line 4 years 4 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 4 months ago #66364

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8194
  • Thank you received: 1117
  • Karma: 331
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 4 months ago by DenisChenu.
The administrator has disabled public write access.

progress bar percentage on next line 4 years 4 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 2 weeks ago #91656

  • dweisser
  • dweisser's Avatar
  • Offline
  • Gold Lime
  • Posts: 210
  • 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 1 week ago #91676

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5398
  • Thank you received: 1149
  • Karma: 477
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

progress bar percentage on next line 2 years 10 months 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.407 seconds