Skip to Content (Press Enter)
2019-06-25 08-42-03
gbarbosa
249Views
3Comments
Solved
Sidebar and double vertical scroll
Question
OutSystems UI
OutSystems Widgets

Hi all!

I have a screen that already has a vertical scrollbar, and when the sidebar opens it gets a second vertical scrollbar. 

The behaviour i would expect is that the page's vertical scrollbar would be replaced by the new one as the overlay is also used. 

Is there a solution out of the box for this? Did someone tackle this issue before and has ideas/suggestions?

Thanks!

0
0
30 Sep 2019
Copy Link
2019-06-25 08-42-03
gbarbosa
Solution

Hi, 

Thanks for asking but unfortunately i could not share it. But you can replicate it easily, just add a sidebar with enough content so that it triggers the vertical scroll in a screen with enough content to have its own vertical scrollbar also and you will see the 2 vertical scrollbars

But I found the solution eitherway: 

On toggle of the sidebar/click overlay screen actions, add a RunJavaScript (from HttpRequestHandler extension) with: 

SyntaxEditor Code Snippet

"   $(""body"").toggleClass(""myClass"");"

and to your theme:

SyntaxEditor Code Snippet

.myClass {    
    margin: 0;
    height: 100%;
    overflow: hidden; }


This will disable the screen vertical scrollbar while the sidebar is open.



See solution in context
0
0
01 Oct 2019
Copy Link
2022-07-24 08-50-37
Gokula Kannan P

gbarbosa wrote:

Hi, 

Thanks for asking but unfortunately i could not share it. But you can replicate it easily, just add a sidebar with enough content so that it triggers the vertical scroll in a screen with enough content to have its own vertical scrollbar also and you will see the 2 vertical scrollbars

But I found the solution eitherway: 

On toggle of the sidebar/click overlay screen actions, add a RunJavaScript (from HttpRequestHandler extension) with: 

SyntaxEditor Code Snippet

"   $(""body"").toggleClass(""myClass"");"

and to your theme:

SyntaxEditor Code Snippet

.myClass {    
    margin: 0;
    height: 100%;
    overflow: hidden; }


This will disable the screen vertical scrollbar while the sidebar is open.




That's fine gbarbosa, but I just want to know why you made overflow: hidden for body element in some cases any other elements come below the content area then you can't scroll again you facing a similar issue. also there is no need for js, why you add toggleClass.

0
0
01 Oct 2019
Copy Link
2022-07-24 08-50-37
Gokula Kannan P

gbarbosa wrote:

Hi all!

I have a screen that already has a vertical scrollbar, and when the sidebar opens it gets a second vertical scrollbar. 

The behaviour i would expect is that the page's vertical scrollbar would be replaced by the new one as the overlay is also used. 

Is there a solution out of the box for this? Did someone tackle this issue before and has ideas/suggestions?

Thanks!

Hi gbarbosa,

     Can you share your output screen or published link.


1
0
30 Sep 2019
Copy Link
2019-06-25 08-42-03
gbarbosa
Solution

Hi, 

Thanks for asking but unfortunately i could not share it. But you can replicate it easily, just add a sidebar with enough content so that it triggers the vertical scroll in a screen with enough content to have its own vertical scrollbar also and you will see the 2 vertical scrollbars

But I found the solution eitherway: 

On toggle of the sidebar/click overlay screen actions, add a RunJavaScript (from HttpRequestHandler extension) with: 

SyntaxEditor Code Snippet

"   $(""body"").toggleClass(""myClass"");"

and to your theme:

SyntaxEditor Code Snippet

.myClass {    
    margin: 0;
    height: 100%;
    overflow: hidden; }


This will disable the screen vertical scrollbar while the sidebar is open.



0
0
01 Oct 2019
Copy Link
2022-07-24 08-50-37
Gokula Kannan P

gbarbosa wrote:

Hi, 

Thanks for asking but unfortunately i could not share it. But you can replicate it easily, just add a sidebar with enough content so that it triggers the vertical scroll in a screen with enough content to have its own vertical scrollbar also and you will see the 2 vertical scrollbars

But I found the solution eitherway: 

On toggle of the sidebar/click overlay screen actions, add a RunJavaScript (from HttpRequestHandler extension) with: 

SyntaxEditor Code Snippet

"   $(""body"").toggleClass(""myClass"");"

and to your theme:

SyntaxEditor Code Snippet

.myClass {    
    margin: 0;
    height: 100%;
    overflow: hidden; }


This will disable the screen vertical scrollbar while the sidebar is open.




That's fine gbarbosa, but I just want to know why you made overflow: hidden for body element in some cases any other elements come below the content area then you can't scroll again you facing a similar issue. also there is no need for js, why you add toggleClass.

0
0
01 Oct 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.