Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-33448

Horizontal scrolling skews menu positioning within View Columns panel

    Details

    • Type: Bug
    • Status: Verified
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 12.0
    • Fix Version/s: 12.0, 19.0
    • Component/s: Gradebook
    • Labels:
      None
    • Environment:
      Chrome
    • 12 status:
      Resolved
    • Test Plan:
      Hide

      Step A: Setup the gradebook and add gradebook items

      1. In an empty Gradebook, click the Settings tab.
      2. Expand the Categories & Weighting section, and select Categories only.
      3. Create two categories “Cat 1” and “Cat 2” and click Save Changes.
      4. Click the Grades tab.
      5. Add two gradebook items, each worth 100 points:  “Item 1” assigned to “Cat 1” and “Item 2” assigned to “Cat 2”.
      6. After completing the above steps, the gradebook should look similar to the attached screenshot, StepA.png.

      Step B: Trigger the menu position skew in the View Columns panel

      1. Click the View Columns button. (See StepB1.png.)
      2. Click the topmost dropdown button associated with “Cat 1” to display the menu items “Show only this category” and “Hide this category”. (See StepB2.png.)
      3. Click the same topmost dropdown button associated with “Cat 1” to close that show/hide menu. (See StepB3.png.)
      4. While the View Columns panel is still displayed, move the mouse cursor down to the horizontal scrollbar and drag it slightly to the right. Doing so will cause the View Columns panel to disappear. (See StepB4.png.)
      5. Click the View Columns button again. (See StepB5.png.)
      6. Once more, click the topmost dropdown button associated with “Cat 1”. Note that the expected menu is not in sight. Instead, vertical and horizontal scrollbars are displayed within the View Columns panel. (See StepB6.png.)
      7. Use those scrollbars to scroll all the way down and all the way to the right. Observe that the menu with the items with “Show only this category” and “Hide this category” have been significantly displaced from its associated the “Cat 1” dropdown button. (See StepB7.png.)
      Show
      Step A: Setup the gradebook and add gradebook items In an empty Gradebook, click the Settings tab. Expand the Categories & Weighting section, and select Categories only. Create two categories “Cat 1” and “Cat 2” and click Save Changes. Click the Grades tab. Add two gradebook items, each worth 100 points:  “Item 1” assigned to “Cat 1” and “Item 2” assigned to “Cat 2”. After completing the above steps, the gradebook should look similar to the attached screenshot, StepA.png. Step B: Trigger the menu position skew in the View Columns panel Click the View Columns button. (See StepB1.png.) Click the topmost dropdown button associated with “Cat 1” to display the menu items “Show only this category” and “Hide this category”. (See StepB2.png.) Click the same topmost dropdown button associated with “Cat 1” to close that show/hide menu. (See StepB3.png.) While the View Columns panel is still displayed, move the mouse cursor down to the horizontal scrollbar and drag it slightly to the right. Doing so will cause the View Columns panel to disappear. (See StepB4.png.) Click the View Columns button again. (See StepB5.png.) Once more, click the topmost dropdown button associated with “Cat 1”. Note that the expected menu is not in sight. Instead, vertical and horizontal scrollbars are displayed within the View Columns panel. (See StepB6.png.) Use those scrollbars to scroll all the way down and all the way to the right. Observe that the menu with the items with “Show only this category” and “Hide this category” have been significantly displaced from its associated the “Cat 1” dropdown button. (See StepB7.png.)

      Description

      For gradebooks with Categories only or Categories & weighting, the act of scrolling horizontally can skew the positioning of menus nested within the popup View Columns panel. This can be demonstrated on the nightly server for 12.x by following the steps in the Test Plan.

      I had stumbled on this bug while scrolling horizontally and interacting with the View Columns panel to edit the display of a gradebook with categories. The steps in the Test Plan are one distillation for reliably reproducing this skewed positioning of menus within the View Columns panel. There might be other methods.

        Gliffy Diagrams

          Attachments

          1. StepA.png
            StepA.png
            85 kB
          2. StepB1.png
            StepB1.png
            93 kB
          3. StepB2.png
            StepB2.png
            103 kB
          4. StepB3.png
            StepB3.png
            100 kB
          5. StepB4.png
            StepB4.png
            97 kB
          6. StepB5.png
            StepB5.png
            92 kB
          7. StepB6.png
            StepB6.png
            99 kB
          8. StepB7.png
            StepB7.png
            89 kB

            Activity

              People

              • Assignee:
                paytengiles Payten Giles
                Reporter:
                hornersa Sean Horner
              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Git Source Code