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

          Zeplin

            Attachments

            1. StepB7.png
              StepB7.png
              89 kB
            2. StepB6.png
              StepB6.png
              99 kB
            3. StepB5.png
              StepB5.png
              92 kB
            4. StepB4.png
              StepB4.png
              97 kB
            5. StepB3.png
              StepB3.png
              100 kB
            6. StepB2.png
              StepB2.png
              103 kB
            7. StepB1.png
              StepB1.png
              93 kB
            8. StepA.png
              StepA.png
              85 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 Integration