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

simplify positioning via CSS on an anchor on the same page

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.10.3
    • Fix Version/s: None
    • Component/s: Themes
    • Labels:
      None
    • Affected Branches:
      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

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

                Dates

                Created:
                Updated: