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

Content displacement when using clicking incontent anchor elements

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.1.1
    • Fix Version/s: 2.0.6, 2.1.3
    • Component/s: Course, Themes
    • Labels:
    • Testing Instructions:
      Hide

      Since this problem only relates to certain CORE themes which use CANVAS as a parent theme, you only need to check the following themes: Boxxie, FormFactor, Leatherbound, Serenity & Splash. All other themes EXCLUDE pagelayout from CANVAS theme.
      INSTRUCTIONS FOR TESTING:
      1. FIRST with editing ON create an anchor (bookmark) using the HTML part of the text editor at about Section 5 of a course page (i.e) <a name="test"></a> SAVE
      2. In Section 0 (zero) of the same course page create a link back to the anchor (i.e) <a href="#test">anchorlink</a>
      3. Turn Editing OFF
      4. CLICK on the link: the page will then scroll down to the section which was bookmarked.
      5. SCROLL back up to the top of the page -> check to see headline h2.headingblock is fully visible

      Show
      Since this problem only relates to certain CORE themes which use CANVAS as a parent theme, you only need to check the following themes: Boxxie, FormFactor, Leatherbound, Serenity & Splash. All other themes EXCLUDE pagelayout from CANVAS theme. INSTRUCTIONS FOR TESTING: 1. FIRST with editing ON create an anchor (bookmark) using the HTML part of the text editor at about Section 5 of a course page (i.e) <a name="test"></a> SAVE 2. In Section 0 (zero) of the same course page create a link back to the anchor (i.e) <a href="#test">anchorlink</a> 3. Turn Editing OFF 4. CLICK on the link: the page will then scroll down to the section which was bookmarked. 5. SCROLL back up to the top of the page -> check to see headline h2.headingblock is fully visible
    • Workaround:
      Hide

      disabling the css properties overflow:hidden and position:relative of all parent html elements sort of fixes this issue, but destroys layout -> not a real fix.

      ACTUAL FIX: (theme/canvas/style/pagelayout.css)

      - #page-content #region-main-box .region-content {
          padding: 0;
      }
      + #page-content #region-main-box .region-content {
          padding: 10px 0 0;
      }

      Show
      disabling the css properties overflow:hidden and position:relative of all parent html elements sort of fixes this issue, but destroys layout -> not a real fix. ACTUAL FIX: (theme/canvas/style/pagelayout.css) - #page-content #region-main-box .region-content { padding: 0; } + #page-content #region-main-box .region-content { padding: 10px 0 0; }
    • Affected Branches:
      MOODLE_21_STABLE
    • Fixed Branches:
      MOODLE_20_STABLE, MOODLE_21_STABLE
    • Pull Master Branch:

      Description

      created a course with anchor elements and links to the anchors.
      after clicking the <a> the page jumps to the anchor, but
      the content div "region-content" is moved upwards about 12px. In the DOM no values are change, but firebug confirms, that the div has been moved upward.
      when activating or deactivating the "overflow:hidden" css style of any of the previous parent html elements with firebug the page is rendered correctly.

      the problem occurs in firefox 6, opera 11.5, chrome 13, IE8-9 but not IE7
      and is existing in other themes like "Boxxie"

        Attachments

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                28/Nov/11