Anchor hides behind header

Bug #1833390 reported by Kristina Hoeppner on 2019-06-19
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
High
Unassigned
19.04
High
Unassigned
19.10
High
Unassigned

Bug Description

when you place an anchor into text and jump to it, the anchored text is not displayed, but you need to scroll a bit up to see it. The anchor link jumps all the way to the top of the view port. That places the anchor behind the top header with the logo and the navigation. Instead, the anchor should take that strip into consideration and display the text right below it thus effectively making the viewport smaller.

The tricky thing here will be to take into consideration that the height of the header can vary depending on the site messages that are displayed.

To replicate:

1. Create a page with a very long text, e.g. created via https://www.lipsum.com
2. Create an anchor in the text in the second paragraph.
3. Link to the anchor further down in the text.
4. Click "Display this page" and scroll down to the link.
5. Click the link.
Expected result: The text to which the anchor points is displayed.
Actual result: A few lines further down from the anchor are visible at the edge of the header and the anchor itself needs to be scrolled to as it is hidden by the header.

no longer affects: mahara/18.04
no longer affects: mahara/18.10

When testing, test with:

- productionmode = false
- productionmode = true
- each of the above also when masquerading as another user so as to get more site messages to display.

The anchor should always be displayed below the final header.

Steven (stevens-q) wrote :

Commit hash: 399f99f9a4cb0b0fb26a88a6fa4a3bcdd184dddb
Environment tested: Master
Browser tested: Chrome
Theme used: Raw | Default raw | Ocean | Modern | Primary school

PRECONDITIONS:
------------------------
1) Set config.php file code to have the following line $cfg->productionmode = false;
2) User3 Exists and has a portfolio page as follows:
    a) 5 paragraphs of text
    b) a link near top of page to an anchor near the bottom of the page

TEST STEPS: Set config.php file code to have the following line $cfg->productionmode = false;
------------------------
1) Log in as Site admin
2) Masquerade as User3
3) Browse to the Portfolio page as described above
4) click the link near the top of the page
5) Verify that the page scrolls down to anchor (near bottom of page ✔
6) Verify the anchored text is displayed ✔
7) Verify the anchor is not hidden behind the top header with the logo and the navigation ✔
8) Log out and log back in as User3
9) Browse to the Portfolio page as described above
10) click the link near the top of the page
11) Verify that the page scrolls down to anchor (near bottom of page ✔
12) Verify the anchored text is displayed ✔
13) Verify the anchor is not hidden behind the top header with the logo and the navigation ✔

NOTE:
1) Set config.php file code to have the following line $cfg->productionmode = true;
2) Repeat the above test script
3) Verify that the page scrolls down to anchor (near bottom of page ✔
4) Verify the anchored text is displayed ✔
5) Verify the anchor is not hidden behind the top header with the logo and the navigation ✔

Catalyst QA ✔

Reviewed: https://reviews.mahara.org/10130
Committed: https://git.mahara.org/mahara/mahara/commit/5d9fcca2cacd4bc8d2cb5d3c7746d9add8b5c763
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 5d9fcca2cacd4bc8d2cb5d3c7746d9add8b5c763
Author: anupamadharmajan <email address hidden>
Date: Tue Jun 25 14:43:14 2019 +1000

Bug 1833390: Anchor hides behind header

behatnotneeded

Change-Id: I8ac2b4533b4116de12e9b2739b5c4a9374cab454

Reviewed: https://reviews.mahara.org/10149
Committed: https://git.mahara.org/mahara/mahara/commit/39b5238cd47e867c4d7729a6abea0592b45869df
Submitter: Robert Lyon (<email address hidden>)
Branch: 19.04_STABLE

commit 39b5238cd47e867c4d7729a6abea0592b45869df
Author: anupamadharmajan <email address hidden>
Date: Tue Jun 25 14:43:14 2019 +1000

Bug 1833390: Anchor hides behind header

behatnotneeded

Change-Id: I8ac2b4533b4116de12e9b2739b5c4a9374cab454
(cherry picked from commit 5d9fcca2cacd4bc8d2cb5d3c7746d9add8b5c763)

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers