v6 Portal - Remove Side NavBar Scrollbar

Chris_Keander

Running latest v6 portal in our test environment and I'm noticing a visible scroll bar that is unnecessarily displayed.  I'm noticing this on Cireson's own portal as well.

How do we remove this?

Adrian_Paech

I noticed this too. Am running ie11. Would be great to remove it.

cheers,
adrian

Kristoffer_Stormark

Hi 
You should be able to hide it by using this 

in cutsom.css

#side_nav .ps-scrollbar-y {

opacity: 0;

}

Chris_Keander

This is an acceptable solution, for now.  Would this break something in the future if we were to add more icons/pages to the side nav bar?

Tom_Hendricks

A suggestion to add along with @Kristoffer_Stormark 's css:

#side_nav:hover .ps-scrollbar-y {
	opacity: initial;
}

This will show the scrollbar when you expect to see it, and hide it when you don't.
One thing to note, however, is that this does not consider the height of your nav bar icons at all. Mine are tall enough to benefit from a scrollbar, but the original suggestion would work on its own for many other folks.
I will leave it to others to add the fancy @media selectors, etc. to help it adapt to your menu height. :-)

merlenette_jones

Chris_Keander said:

Running latest v6 portal in our test environment and I'm noticing a visible scroll bar that is unnecessarily displayed.  I'm noticing this on Cireson's own portal as well.

How do we remove this?

Hi Chris,

This is actually by design. I've pasted a screenshot of my environment. When you have a lot of Navigation nodes configured the bar allows you to scroll vertically, yet is shouldn't appear if there aren't enough items to scroll through. I will bring this to the attention of my dev team. Good eye!



Merle

Chris_Keander

Tom_Hendricks said:

A suggestion to add along with @Kristoffer_Stormark 's css:

#side_nav:hover .ps-scrollbar-y {
	opacity: initial;
}

This will show the scrollbar when you expect to see it, and hide it when you don't.
One thing to note, however, is that this does not consider the height of your nav bar icons at all. Mine are tall enough to benefit from a scrollbar, but the original suggestion would work on its own for many other folks.
I will leave it to others to add the fancy @media selectors, etc. to help it adapt to your menu height. :-)

I tried your suggestions but the scrollbar still remained.

merlenette_jones

Chris_Keander said:

Tom_Hendricks said:

A suggestion to add along with @Kristoffer_Stormark 's css:

#side_nav:hover .ps-scrollbar-y {
	opacity: initial;
}

This will show the scrollbar when you expect to see it, and hide it when you don't.
One thing to note, however, is that this does not consider the height of your nav bar icons at all. Mine are tall enough to benefit from a scrollbar, but the original suggestion would work on its own for many other folks.
I will leave it to others to add the fancy @media selectors, etc. to help it adapt to your menu height. :-)

I tried your suggestions but the scrollbar still remained.

Chris what are you seeing now?

Did you try clearing the browser cache (Ctril+F5)

Chris_Keander

If I use:

#side_nav .ps-scrollbar-y {
opacity: 0;
}

followed by CTRL+F5 (Firefox) the scroll bar is removed

If I use:

#side_nav .ps-scrollbar-y {
opacity: initial;
}

followed by CTRL+F5 the scroll bar is back.

merlenette_jones

Chris,

Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the "alpha" channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

So I would use what you have gotten to work 

Tom_Hendricks

Chris_Keander said:

If I use:

#side_nav .ps-scrollbar-y {
opacity: initial;
}

followed by CTRL+F5 the scroll bar is back.

Yes, but if you use #side_nav:hover .ps-scrollbar-y { opacity: initial; }, like in my example, then it only re-appears when you hover over the sidebar. That appears to be the difference.  Good luck!

Bonus: opacity: 0.75 seems to work a little nicer than my original suggestion of "initial"

Chris_Keander

Tom_Hendricks said:

Yes, but if you use #side_nav:hover .ps-scrollbar-y { opacity: initial; }, like in my example, then it only re-appears when you hover over the sidebar. That appears to be the difference.  Good luck!

Bonus: opacity: 0.75 seems to work a little nicer than my original suggestion of "initial"

My mistake Tom.  I misread your post and thought your suggestion was a replacement for what Kristoffer_Stormark offered, not an addition.

I can make this work using both of your suggestions (for now, until Cireson addresses this with an official fix.)

Thanks everyone!

Marek_Lefek

I use code below to hide the scrool. Upper don't work for me.

<div>.ps-scrollbar-y-rail> .ps-scrollbar-y {</div><div>opacity: 0;</div><div>}</div>