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

simplify positioning via CSS on an anchor on the same page

    XMLWordPrintable

Details

    • Bug
    • Status: Open
    • Minor
    • Resolution: Unresolved
    • 3.10.3
    • None
    • Themes
    • None
    • MOODLE_310_STABLE

    Description

      Context

      I was trying to provide a solution to the peer-review comments of my issue MDL-70230, when I faced a problem on positioning the user to a certain row to the page admin/tool/task/scheduledtasks.php, pointing to certain scheduled task row.

      The current style from them/boost/style/moodle.css for positioning the user to a certain part of a page consists of the following CSS:

      /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
      :target::before

      { content: " "; display: block; height: 60px; /* fixed header height*/ margin-top: -60px; /* negative fixed header height */ width: 1px; pointer-events: none; }

      Problem

      This style adds content, made invisible, that does not work on all scenarios. In my case, if I add the id attribute to a <tr> tag, the added content is interpreted by the browser as the first cell (virtually the first <td> position), moving the real content one column to the right (see the screenshot on the attachments section).

      Proposed solution

      I found a site with a solution that faces the problem of positioning the expected content to the user, below the fixed header, in a different approach: moving the scroll.

      I will add it as a custom style for the MDL-70230, but I propose here to adopt this CSS, I think, equivalent to the above CSS style:

      /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header */
      :target

      {   scroll-margin-top: 60px; }

      This worked for me. I can imagine that the whole CSS style for the :target::before was the result of a tough research and a lot of QA testing. Maybe I'm not considering important things. Please, debate on this issue any relevant aspect that I missed.

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              jpahullo Jordi Pujol-Ahulló
              Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated: