IT Monkey:   Click Here to Help Me Build the Agenda for Upcoming Cireson Webinars!

v6 Portal - Remove Side NavBar Scrollbar

Chris_KeanderChris_Keander Customer Advanced IT Monkey ✭✭✭
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?


Comments

  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭
    I noticed this too. Am running ie11. Would be great to remove it.

    cheers,
    adrian
  • Kristoffer_StormarkKristoffer_Stormark Customer IT Monkey ✭
    Hi 
    You should be able to hide it by using this 

    in cutsom.css

    #side_nav .ps-scrollbar-y {
    opacity: 0;
    }
  • Chris_KeanderChris_Keander Customer Advanced IT Monkey ✭✭✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    edited September 2016
    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_jonesmerlenette_jones Member Advanced IT Monkey ✭✭✭
    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_KeanderChris_Keander Customer Advanced IT Monkey ✭✭✭
    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_jonesmerlenette_jones Member Advanced IT Monkey ✭✭✭
    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_KeanderChris_Keander Customer Advanced IT Monkey ✭✭✭
    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_jonesmerlenette_jones Member Advanced IT Monkey ✭✭✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭

    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_KeanderChris_Keander Customer Advanced IT Monkey ✭✭✭
    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_LefekMarek_Lefek Customer Advanced IT Monkey ✭✭✭
    I use code below to hide the scrool. Upper don't work for me.
    .ps-scrollbar-y-rail> .ps-scrollbar-y {opacity: 0;}


Sign In or Register to comment.