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

date_time_selector popup is too constrained

    Details

    • Testing Instructions:
      Hide

      Test pre-requisites

      • This test has to be done on different themes (the more the better)

      Test steps

      1. Go to Navigation > Site pages > Calendar and click on 'New event'
      2. Click to edit the date
      3. Make sure the date selector does not overlap with the dropdown menu
      4. Using Firebug, edit the HTML and remove the fields 'Type of event', 'Name' and 'Description'.
      5. Click to edit the date
      6. Make sure the date selector does not overlap with the dropdown menu

      (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)

      Show
      Test pre-requisites This test has to be done on different themes (the more the better) Test steps Go to Navigation > Site pages > Calendar and click on 'New event' Click to edit the date Make sure the date selector does not overlap with the dropdown menu Using Firebug, edit the HTML and remove the fields 'Type of event', 'Name' and 'Description'. Click to edit the date Make sure the date selector does not overlap with the dropdown menu (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)
    • Workaround:
      Hide

      Change constraint from form to body:

      lib/form/yui/dateselector/dateselector.js

      fix_position : function() {
        if (this.currentowner) {
          // this.panel.set('constrain', this.currentowner.get('node').ancestor('form'));
          this.panel.set('constrain', this.currentowner.get('node').ancestor('body'));
          this.panel.set('align', {
            node:this.currentowner.get('node').one('select'),
            points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
          });
        }
      },

      Show
      Change constraint from form to body: lib/form/yui/dateselector/dateselector.js fix_position : function() { if (this.currentowner) { // this.panel.set('constrain', this.currentowner.get('node').ancestor('form')); this.panel.set('constrain', this.currentowner.get('node').ancestor('body')); this.panel.set('align', { node:this.currentowner.get('node').one('select'), points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL] }); } },
    • Affected Branches:
      MOODLE_22_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-32297-master

      Description

      The date_time_selector has a javascript calendar popup, this works ok, unless the date_time_selector is one of the top elements of the form.
      The popup is constrained by the form area, but this is too restricted for some cases.

      I've added a picture of the form constrain, and one where it has been replaced by the body element (simple fix).

        Gliffy Diagrams

          Issue Links

            Activity

            drphrozen Esben Sune Rasmussen created issue -
            drphrozen Esben Sune Rasmussen made changes -
            Field Original Value New Value
            Description The date_time_selector has a javascript calendar popup, this works ok, unless the date_time_selector is one of the top elements of the form.
            The popup is constrained by the form area, but this is too restricted for some cases.


            {code:title=lib/form/yui/dateselector/dateselector.js|borderStyle=solid}
            fix_position : function() {
              if (this.currentowner) {
                // this.panel.set('constrain', this.currentowner.get('node').ancestor('form'));
                this.panel.set('constrain', this.currentowner.get('node').ancestor('body'));
                this.panel.set('align', {
                  node:this.currentowner.get('node').one('select'),
                  points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
                });
              }
            },
            {code}

            The date_time_selector has a javascript calendar popup, this works ok, unless the date_time_selector is one of the top elements of the form.
            The popup is constrained by the form area, but this is too restricted for some cases.

            I've added a picture of the form constrain, and one where it has been replaced by the body element (simple fix).
            Workaround Change constraint from form to body:

            {code:title=lib/form/yui/dateselector/dateselector.js|borderStyle=solid}
            fix_position : function() {
              if (this.currentowner) {
                // this.panel.set('constrain', this.currentowner.get('node').ancestor('form'));
                this.panel.set('constrain', this.currentowner.get('node').ancestor('body'));
                this.panel.set('align', {
                  node:this.currentowner.get('node').one('select'),
                  points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
                });
              }
            },
            {code}
            Attachment popup_body_constrained.png [ 27794 ]
            Attachment popup_form_constrained.png [ 27795 ]
            salvetore Michael de Raadt made changes -
            Fix Version/s STABLE backlog [ 10463 ]
            Labels patch triaged
            salvetore Michael de Raadt made changes -
            Link This issue has been marked as being related by MDL-33771 [ MDL-33771 ]
            salvetore Michael de Raadt made changes -
            Link This issue has been marked as being related by MDL-26649 [ MDL-26649 ]
            fred Frédéric Massart made changes -
            Fix Version/s STABLE Sprint 22 [ 12156 ]
            Fix Version/s STABLE backlog [ 10463 ]
            Assignee moodle.com [ moodle.com ] Frédéric Massart [ fred ]
            fred Frédéric Massart made changes -
            Status Open [ 1 ] Waiting for peer review [ 10012 ]
            Pull Master Diff URL https://github.com/FMCorz/moodle/compare/master...MDL-32297-master
            Pull 2.3 Diff URL https://github.com/FMCorz/moodle/compare/MOODLE_23_STABLE...MDL-32297-23
            Pull Master Branch MDL-32297-master
            Pull from Repository git://github.com/FMCorz/moodle.git
            Pull 2.2 Diff URL https://github.com/FMCorz/moodle/compare/MOODLE_22_STABLE...MDL-32297-22
            Pull 2.2 Branch MDL-32297-22
            Pull 2.3 Branch MDL-32297-23
            fred Frédéric Massart made changes -
            Testing Instructions # Do to the form to add a new assignment 2.2 online text to an activity
            # Inspect the HTML and delete the <divs id="fitem_id_*"> above 'Available from', so that the date is the first element of the fieldset
            # Click the date field to display date selector
            # Make sure the date selector does not overlap with the dropdown menu

            (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)
            rajeshtaneja Rajesh Taneja made changes -
            Original Estimate 0 minutes [ 0 ]
            Remaining Estimate 0 minutes [ 0 ]
            Status Waiting for peer review [ 10012 ] Peer review in progress [ 10013 ]
            Peer reviewer rajeshtaneja
            rajeshtaneja Rajesh Taneja made changes -
            Status Peer review in progress [ 10013 ] Waiting for integration review [ 10010 ]
            fred Frédéric Massart made changes -
            Testing Instructions # Do to the form to add a new assignment 2.2 online text to an activity
            # Inspect the HTML and delete the <divs id="fitem_id_*"> above 'Available from', so that the date is the first element of the fieldset
            # Click the date field to display date selector
            # Make sure the date selector does not overlap with the dropdown menu

            (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)
            # Go to Navigation > Site pages > Calendar and click on 'New event'
            # Click to edit the date
            # Make sure the date selector does not overlap with the dropdown menu
            # Using Firebug, edit the HTML and remove the fields 'Type of event', 'Name' and 'Description'.
            # Click to edit the date
            # Make sure the date selector does not overlap with the dropdown menu

            (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)
            poltawski Dan Poltawski made changes -
            Link This issue is duplicated by MDL-34168 [ MDL-34168 ]
            samhemelryk Sam Hemelryk made changes -
            Currently in integration Yes [ 10041 ]
            samhemelryk Sam Hemelryk made changes -
            Status Waiting for integration review [ 10010 ] Integration review in progress [ 10004 ]
            Integrator samhemelryk
            samhemelryk Sam Hemelryk made changes -
            Status Integration review in progress [ 10004 ] Waiting for testing [ 10005 ]
            Fix Version/s 2.2.5 [ 12352 ]
            Fix Version/s 2.3.2 [ 12353 ]
            timb Tim Barker made changes -
            Tester davmon
            dmonllao David Monllaó made changes -
            Status Waiting for testing [ 10005 ] Testing in progress [ 10011 ]
            dmonllao David Monllaó made changes -
            Status Testing in progress [ 10011 ] Problem during testing [ 10007 ]
            fred Frédéric Massart made changes -
            Testing Instructions # Go to Navigation > Site pages > Calendar and click on 'New event'
            # Click to edit the date
            # Make sure the date selector does not overlap with the dropdown menu
            # Using Firebug, edit the HTML and remove the fields 'Type of event', 'Name' and 'Description'.
            # Click to edit the date
            # Make sure the date selector does not overlap with the dropdown menu

            (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)
            *Test pre-requisites*

            - This test has to be done on different themes (the more the better)

            *Test steps*

            # Go to Navigation > Site pages > Calendar and click on 'New event'
            # Click to edit the date
            # Make sure the date selector does not overlap with the dropdown menu
            # Using Firebug, edit the HTML and remove the fields 'Type of event', 'Name' and 'Description'.
            # Click to edit the date
            # Make sure the date selector does not overlap with the dropdown menu

            (This fix won't work when the inputs are closer to <body> but MDL-26649 will take care of it)
            samhemelryk Sam Hemelryk made changes -
            Status Problem during testing [ 10007 ] Integration review in progress [ 10004 ]
            samhemelryk Sam Hemelryk made changes -
            Status Integration review in progress [ 10004 ] Waiting for testing [ 10005 ]
            dmonllao David Monllaó made changes -
            Status Waiting for testing [ 10005 ] Testing in progress [ 10011 ]
            dmonllao David Monllaó made changes -
            Status Testing in progress [ 10011 ] Tested [ 10006 ]
            poltawski Dan Poltawski made changes -
            Status Tested [ 10006 ] Closed [ 6 ]
            Resolution Fixed [ 1 ]
            Currently in integration Yes [ 10041 ]
            Integration date 12/Jul/12
            moodle.com moodle.com made changes -
            Fix Version/s STABLE Sprint 21 [ 12155 ]
            Fix Version/s STABLE Sprint 22 [ 12156 ]
            salvetore Michael de Raadt made changes -
            Link This issue caused a regression MDL-35675 [ MDL-35675 ]
            stronk7 Eloy Lafuente (stronk7) made changes -
            Fix Version/s STABLE Sprint 21 [ 12155 ]

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  10/Sep/12