Moodle
  1. Moodle
  2. MDL-29197

Content displacement when using clicking incontent anchor elements

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Minor 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:
    • Rank:
      18741

      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"

      1. replication.jpg
        180 kB
      2. Untitled-1.png
        53 kB

        Activity

        Hide
        Michael de Raadt added a comment -

        Hi, reporter.

        It would be nice if you could use your real name.

        I was able to replicate this using the Boxie theme on FF, IE and Chrome. It didn't seem to be a problem with the standard theme, so I assume this has something to do with themes, although I'm not sure how.

        Show
        Michael de Raadt added a comment - Hi, reporter. It would be nice if you could use your real name. I was able to replicate this using the Boxie theme on FF, IE and Chrome. It didn't seem to be a problem with the standard theme, so I assume this has something to do with themes, although I'm not sure how.
        Hide
        A.Richter added a comment -

        Hi
        sry about that name thing - leaving clear names online is not favourable for everybody

        before reporting I tried another theme(the first one in the theme list) at work - which as far as I can remember doesnt have a <h2 > headline, but the content also moved upwards.

        is there a way to tell the browser to render the content without loading? when you activate/deactive the overflow css property of any parent element it seams that ff is force to render the page again -> the bug disappears

        Show
        A.Richter added a comment - Hi sry about that name thing - leaving clear names online is not favourable for everybody before reporting I tried another theme(the first one in the theme list) at work - which as far as I can remember doesnt have a <h2 > headline, but the content also moved upwards. is there a way to tell the browser to render the content without loading? when you activate/deactive the overflow css property of any parent element it seams that ff is force to render the page again -> the bug disappears
        Hide
        Mary Evans added a comment -

        This look like a CSS issue and easily fix if I am right.

        Show
        Mary Evans added a comment - This look like a CSS issue and easily fix if I am right.
        Hide
        Sam Hemelryk added a comment -

        Thanks Mary - this has been integrated now

        Show
        Sam Hemelryk added a comment - Thanks Mary - this has been integrated now
        Hide
        Adrian Greeve added a comment -

        Tested on 2.1 with Firefox 7.0.1 and Chrome 15.0.874.106
        It still shaves a bit off the top of the div. It doesn't interfere with the text in the div anymore - i.e. Weekly outline. Could be raised again as a minor issue.

        Show
        Adrian Greeve added a comment - Tested on 2.1 with Firefox 7.0.1 and Chrome 15.0.874.106 It still shaves a bit off the top of the div. It doesn't interfere with the text in the div anymore - i.e. Weekly outline. Could be raised again as a minor issue.
        Hide
        Eloy Lafuente (stronk7) added a comment -

        And this has been sent upstream (already available @ git and cvs repos). Many, many thanks!

        Closing as fixed, ciao

        Show
        Eloy Lafuente (stronk7) added a comment - And this has been sent upstream (already available @ git and cvs repos). Many, many thanks! Closing as fixed, ciao

          People

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

            Dates

            • Created:
              Updated:
              Resolved: