Adaptable, sticky navbar and usertours

Adaptable, sticky navbar and usertours

by John Percival -
Number of replies: 7

Hello, I'm having problems with misaligned usertours in the Adaptable theme:


If I reload the page it looks fine:


It seems to be that when the step involves a scroll action, the boxes are not aligned. The offset matches the sticky navbar at the top, which makes me think that it's got something to do with the positioning calculations.

Therefore I have done some extra digging in the usertours JS code and identified that the problem is that the node .offset().top value changes depending on whether the navbar is sticky (first value) or standard (second value):


If the usertour step modal position is calculated and then the page is scrolled and the sticky navbar changes status in that process then the usertour step is misplaced.

Is there some way of sorting this? It seems to be the application of the adaptable-navbar-sticky class to #main-navbar that is the issue.

Average of ratings: -
In reply to John Percival

Re: Adaptable, sticky navbar and usertours

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear John,

Please read https://moodle.org/mod/forum/discuss.php?d=333733 and supply the information, with steps to replicate and given the complexity of the theme, a JSON export (personal information removed) would be helpful. Caveat though, this is not a commitment on my part to investigate / fix / support etc, but rather that I have the information required to do so if I decide to investigate further.

Kind regards,

Gareth
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable, sticky navbar and usertours

by John Percival -
Thanks Gareth.

Adaptable Release 3.11.1.0, version 2021081005 on Moodle 3.11.2+ (Build: 20210805)

I will put the adaptable json in a separate post as I'm only allowed 1 attachment. 

Steps for site running adaptable theme:
1. Upload user tour via /admin/tool/usertours/configure.php?action=importtour
2. Create a new course
3. Create a new assignment activity
4. Navigate to the assignment activity and the user tour should begin
5. Look out for misaligned usertour boxes as you navigate through the tour (example screenshots above)

Average of ratings: -
In reply to John Percival

Re: Adaptable, sticky navbar and usertours

by John Percival -

Adaptable json. And I've confirmed that this doesn't happen on Boost in Moodle 3.11.6 (despite the sticky navbar in the theme)

Average of ratings: -
In reply to John Percival

Re: Adaptable, sticky navbar and usertours

by John Percival -
Having posted my adaptable json settings, I've discovered that it happens on a clean install of Adaptable theme, so you can ignore (or moderator can even remove) my adaptable settings
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable, sticky navbar and usertours

by John Percival -
Ok, further digging is enabling me to make progress: I had a look at the original sample code on which the sticky navbar was based: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

This bit of the original does not appear to have been included:
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}
To achieve a similar impact, a dummy/empty div could be added after div#main-navbar

$("header.stickything").append('<div id="navbar-padding" class="d-none d-lg-block"></div>')
And then the following CSS added:
.adaptable-navbar-sticky + #navbar-padding {
    padding-top: 43px;
}

(Some of this may be specific to my site)

Average of ratings: -
In reply to John Percival

Re: Adaptable, sticky navbar and usertours

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear John,

On a test server, please install https://gitlab.com/jezhops/moodle-theme_adaptable/-/tree/36fa4ed3dfc444c33484d30720e36faa4aaad15b and confirm that the commit that tree represents (https://gitlab.com/jezhops/moodle-theme_adaptable/-/commit/36fa4ed3dfc444c33484d30720e36faa4aaad15b) solves the problem.

Kind regards,

Gareth
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable, sticky navbar and usertours

by John Percival -
Yes that seems to do the trick nicely thanks. All the usertour backdrops appear aligned now and the JS offset().top output is consistent throughout the page. Thanks for quick turnaround!
Average of ratings: -