Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-53698

Progress percent sign not showing when the progress bar's width is shorter than the percent text

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.1
    • 3.1
    • Competencies
    • MOODLE_31_STABLE
    • MOODLE_31_STABLE
    • MDL-53698_master
    • Hide
      • Go to the learning plan template page and check that the progress bars and texts are displayed correctly
      • Go to the course competencies page and check that the progress bar and text are displayed correctly
      • Go to the plan detail page and check that the progress bar and text are displayed correctly
      Show
      Go to the learning plan template page and check that the progress bars and texts are displayed correctly Go to the course competencies page and check that the progress bar and text are displayed correctly Go to the plan detail page and check that the progress bar and text are displayed correctly

      The percent sign in the percent text is not being displayed when the bar's width is shorter than the text.

      For example, for a progress bar with 0 percent progress, the percent text shows 0.0 only. If the progress bar's progress is 20% it shows 20.0 only. Setting the overflow property of the progress div to auto, we'll see that the % sign is moved to another line.

      Some solutions that I can think of are as follows:

      1. Quick hack: Remove space between the number and the percent sign.
      2. Overlay the text on top of the bar div. (Then perhaps align it in the middle of the progress bar)

        1. example2.PNG
          example2.PNG
          36 kB
        2. example3.PNG
          example3.PNG
          34 kB
        3. example4.PNG
          example4.PNG
          35 kB
        4. exapmle1.PNG
          exapmle1.PNG
          43 kB

            taboubii Issam Taboubi
            jpataleta Jun Pataleta
            Jun Pataleta Jun Pataleta
            Dan Poltawski Dan Poltawski
            Simey Lameze Simey Lameze
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.