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

Date picker wrong positioning on modal

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.1.7, 3.2.4, 3.4
    • Fix Version/s: 3.2.5, 3.3.2
    • Component/s: Calendar
    • Labels:
    • Testing Instructions:
      Hide

      Notes

      This test needs to be repeated on both the Clean theme and Boost theme as well as for each combination of LTR and RTL languages.

      Test Master

      • Log in as admin
      • Go to the calendar
      • Click the "New Event" button
      • Click the calendar icon in the "Date" section of the form
      • Confirm that the calendar popup does not render above the top of the viewport
      • Confirm that the calendar popup renders at the bottom left of the select box in LTR mode and bottom right in RTL mode
      • Repeat the test for the different combinations of themes and language directions

      Test Master (to cover edit enrolment dialog - MDL-59756 )

      • Now visit any course participants page and click on the edit enrolment (gear) button of any enrolled user. Enable the start and end dates for the enrolment and verify the calendar popup is rendered within the viewport completely, with all buttons and days available.
      • Repeat the test for the different combinations of themes and language directions.

      Test 33 and 32

      • Cherry pick the test commit that Eloy knocked up to have a date picker that would normally render out of the viewport
        • git@github.com:ryanwyllie/moodle.git MDL-59667-master-2-test-page
        • 38f78d952d4affa11eee5b16f07620ee306610d7
      • Go to <your_moodle>/test.php to view the script
      • Click the date picker
      • Confirm that it doesn't render outside of the browser's viewport
      • Repeat the last few steps on the different theme and lang direction combinations
      Show
      Notes This test needs to be repeated on both the Clean theme and Boost theme as well as for each combination of LTR and RTL languages. Test Master Log in as admin Go to the calendar Click the "New Event" button Click the calendar icon in the "Date" section of the form Confirm that the calendar popup does not render above the top of the viewport Confirm that the calendar popup renders at the bottom left of the select box in LTR mode and bottom right in RTL mode Repeat the test for the different combinations of themes and language directions Test Master (to cover edit enrolment dialog - MDL-59756 ) Now visit any course participants page and click on the edit enrolment (gear) button of any enrolled user. Enable the start and end dates for the enrolment and verify the calendar popup is rendered within the viewport completely, with all buttons and days available. Repeat the test for the different combinations of themes and language directions. Test 33 and 32 Cherry pick the test commit that Eloy knocked up to have a date picker that would normally render out of the viewport git@github.com:ryanwyllie/moodle.git MDL-59667 -master-2-test-page 38f78d952d4affa11eee5b16f07620ee306610d7 Go to <your_moodle>/test.php to view the script Click the date picker Confirm that it doesn't render outside of the browser's viewport Repeat the last few steps on the different theme and lang direction combinations
    • Affected Branches:
      MOODLE_31_STABLE, MOODLE_32_STABLE, MOODLE_34_STABLE
    • Fixed Branches:
      MOODLE_32_STABLE, MOODLE_33_STABLE
    • Pull Master Branch:
      MDL-59667-master-2

      Description

      The date picker has a wrong position on the modal because that element has hardcoded css style style="left: 790px; top: -93.3906px;":

      <div id="dateselector-calendar-panel" class="yui3-widget yui3-overlay yui3-widget-positioned yui3-widget-stacked" style="left: 790px; top: -93.3906px;" aria-hidden="true">
      

      It works fine for most of the forms but it does not for cases like this one here, hiding part of the date picker (see screenshot).
      The goal is to fix it properly, looking for other cases on core and remove that hard coded css.

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/Sep/17