[jira] [Comment Edited] (BEAM-13229) [Website] Bug in side navigation when changing tabs in code snippets

["Bulat Safiullin (Jira)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/BEAM-13229?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17534177#comment-17534177 ] 

Bulat Safiullin edited comment on BEAM-13229 at 5/10/22 6:46 AM:
-----------------------------------------------------------------

Hi everyone!
There is an issue with right nav-menu. 
Library being used there is called scroll-spy. [https://getbootstrap.com/docs/4.0/components/scrollspy/]
I tried to fix the bug with 2 steps:
1) set initial offset position to 10px instead of 0, it fixed the moment of right menu elements not being highlighted correctly (previously active link was on upper point of menu)
2) added refresh functionality to toggle method of used library. It fixed the issue when user clicked on different tabs like JAVA, GO, PYTHON, thus changing the DOM. This approach was suggested by creators of the library themselves:

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

 
{code:java}
$('[data-spy="scroll"]').each(function ()
{   var $spy = $(this).scrollspy('refresh') }
) {code}
 

It worked pretty much good on localhost, but unfortunately didn't work well after merging.  At this point, we continue our investigation, but if there's someone who has a better understanding of the root cause any help is very appreciated. 


was (Author: JIRAUSER283866):
Hi everyone!
There is an issue with right nav-menu. 
Library being used there is called scroll-spy. https://getbootstrap.com/docs/4.0/components/scrollspy/
I tried to fix the bug with 2 steps:
1) set initial offset position to 10px instead of 0, it fixed the moment of right menu elements not being highlighted correctly (previously active link was on upper point of menu)
2) added refresh functionality to toggle method of used library. It fixed the issue when user clicked on different tabs like JAVA, GO, PYTHON, thus changing the DOM. This approach was suggested by creators of the library themselves:

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

```
$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

```
It worked pretty much good on localhost, but unfortunately didn't work well after merging.  At this point, we continue our investigation, but if there's someone who has a better understanding of the root cause any help is very appreciated. 

> [Website] Bug in side navigation when changing tabs in code snippets
> --------------------------------------------------------------------
>
>                 Key: BEAM-13229
>                 URL: https://issues.apache.org/jira/browse/BEAM-13229
>             Project: Beam
>          Issue Type: Bug
>          Components: website
>            Reporter: Mike Hernandez
>            Assignee: Bulat Safiullin
>            Priority: P2
>              Labels: bug, website
>          Time Spent: 3h 20m
>  Remaining Estimate: 0h
>
> Steps to reproduce the bug:
>  # Go to the [Beam Programming Guide|https://beam.apache.org/documentation/programming-guide/] page
>  # Go to any code snippet and click on its tabs
>  # Notice at the right side in the side nav that the current pointer will be jumping around sections
> Other pages of Beam's documentation might have the same issue.



--
This message was sent by Atlassian Jira
(v8.20.7#820007)