Uploaded image for project: 'Lesson Builder'
  1. Lesson Builder
  2. LSNBLDR-742

bar graph can overflow and have bad alignment

    Details

    • 11 status:
      Resolved

      Description

      This actually affects all versions that are likely to be out there.

      In inline questions, there's an option to show a graph of poll results. It uses jqBarGraph. There are issues with that module:

      • If the labels are too long, some bars can be misaligned as others, and counts can go beyond the region, going on top of the buttons.
      • If the count is too large (unlikely in practice) it could go outside the region.
      • If you zoom in a lot, the bars can disappear, or the counts can be superimposed on the buttons.

      I've done several things to fix this.

      • use display:flex rather than position:abolute
      • the specified height is now used for the bars. The height of the labels and count is in addition
      • the labels at the bottom are truncated if they don't fit

      The result is something that is responsive and shouldn't ever put text outside the region of the graph.

      Another solution would be to use a table, but that would require a more major rewrite. The only advantage is that it wouldn't have to truncate the labels.

      I'm just checking this into 12. It applies to both 10 and 11, but I'd like to see some QA first. QA should try long labels, both a very long word and a very long phrase of multiple words. Tests should be done with narrow and wide columns and varying numbers of possible responses.

      To QA, add an inline question, and enable showing the poll results. It the table that results from showing the poll that is at issue.

      I'm considering disabling the animation. It looks kind of odd with this configuration.

      If anyone is using jqBarGraph for anything else, the new version should be generally usable.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  hedrick Charles Hedrick
                  Reporter:
                  hedrick Charles Hedrick
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  1 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code