nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

H5P affects D2L's nav bar position

James.M.999

Has anyone else run into the following issue when using a book activity from H5P? We embed the H5P book in a content page, and when clicked, the book's position on the page changes (I think there is some scrollToTop method being called in an H5P script). However, in doing so, D2L's nav bar gets pushed off the screen and disappears. The only way to get it back is to edit the content page or turn the new experience on/off (I should note this only happens in the new experience).

Are there any potential solutions for this?

Find more posts tagged with

Comments

Joshua.G.520

Hey James I have not used the book activity from H5P, but this sounds very similar to an issue I have run into. I made you a video to illustrate the effect I have seen: https://www.wevideo.com/view/3708297893. As you can see the link in the page is to a #action fragment identifier, which pushes the navbar up out of view as you describe. Works just fine if content is viewed in a new tab, with no navbar. It is only when viewed inline in content with the navbar that the page scrolls incorrectly.

I don't have a fix for it, but seems to be role-dependent for our org - scrolling by 249 pixels for one role and 9.333 for another, so barely noticeable for those users. 264 for another. I have no fix unfortunately, unless you want to train all your users in the devtools console :) I have not yet opened a case with D2L about this.

Bruce.B.5942

Hi @James.M.999 & @Joshua.G.520

I attempted to look at your video, but it came back with a dead link. I'd recommend that you work with your Approved Support Contact to have a new case opened on this matter. We appreciate that having the navigation bar position changing due to an H5P element is undesired and we would want to have this rectified. Having clear steps to reproduce for H5P & D2L's Product / Development teams would be outstanding to assist us in ensuring this is properly triaged and prioritized.

Thank you Joshua for some suggestions on how to make this less problematic for James.

Kind regards, Bruce

Joshua.G.520

Hi @Bruce.B.64 and @James.M.999 apologies - I had tested that link but somehow I must have made a copy-and-paste error. Should work now.

James let me know if you decide to get a new case opened or not, and if you do, feel free to share my video. If you don't, I can, but we don't have the H5P elements, so your case may be a better/easier one for D2L to support.