7 Replies Latest reply on Sep 12, 2017 9:22 PM by kvsinfo

    How to hide sidarbar menu dynamically?


      I'm using apex 5.1.2 and universal theme.


      I used the article below but the sidebar is just minimized but I can still see it




      As of now I can hide the top (nav bar) using the inline css and js code below


      inline CSS

      .hide-nav-bar {

         height: 0px;  


      JS Code




      I tried both but it does NOT worrk




      It seems like the issue is during page load the sidebar has NOT been rendered yet so anything I set is overwritten by APEX.

      I tried the console and both of these functions seem to be valid.


      Please note that I need the side bar hidden dynamically like below, thanks

      // Sidebar is displayed by default

      // When page load DA I would like to execute the code below


      if (condition) {

        // hide sidebar


        • 1. Re: How to hide sidarbar menu dynamically?
          Justin Warwick

          While I'm sure you could figure out the problem with this Do-It-Yourself approach, I would advise using the built-in Dynamic Actions for showing/hiding items and regions. You would then not need to do any hand-coding of CSS or javascript (although that is indeed how dynamic actions work, but they do it in a systematic built-in way). Here is a documentation reference to get you started:


          • 2. Re: How to hide sidarbar menu dynamically?

            As far as I know there is NO way to hide/show sidebar menu thru STD DA.


            Regions are for regions on a page but this DO NOT apply to the side bar.


            Below is sample page where the leftmost side bar that I'm referring to, thanks

            • 3. Re: How to hide sidarbar menu dynamically?
              Justin Warwick

              Ah ok, I see. I didn't realize this was sort of a special template region. Thanks for the screen shot, definitely clarifying. I think your approach will probably work with some tweaks.


              Some minor errors in the javascript you have proposed: you will want to use the element ID in your jquery selector, so prefix with the hash mark ("#"). Also, I think that #t_TreeNav is "too far down" the tree, and you will only clear out the clickable nav controls in the bar. Instead you will probably want to select #t_Body_nav .  Also, the t-header-branding css class corresponds to the horizontal top-bar (at least in my 5.0 installation's universal theme).


              Try this: skip the CSS, just put " $('#t_Body_nav').hide(); " into an Execute JavaScript Code action (true) for an After Page Load event.



              And later in page actions, if you want it back again, just issue the "reverse" javascript/jquery


              In a dynamic action, preferably.

              • 4. Re: How to hide sidarbar menu dynamically?

                Justin it works now except the space used by the side menu is still allocated.


                Is there a way to move the breadcrumb and regions move to the left so there is almost no gap on the left side.


                thanks again!


                • 5. Re: How to hide sidarbar menu dynamically?
                  Justin Warwick

                  I'm glad it worked out. After peeking at the DOM changes while clicking the expand/collapse button, you can get it down to the collapsed width if you add this in:


                  //Collapse the left-hand nav sidebar




                  //And reverse that process to re-expand




                  After that, to get it any further you'd need to modify the properties of the js-navCollapsed class (which, it turns out, is tricky)

                  or you might get by with assigning CSS attribute values directly to the content ellements.




                  So all together now:







                  This definitely gets into less stable territory, as future upstream changes to themes might affect how this kind of approach works, or unforseen combinations of page actions break it. But I know sometimes its the best option, just caveat emptor and all that.

                  • 6. Re: How to hide sidarbar menu dynamically?

                    Hello kvsinfo


                    Have you thought of using the "Minimal (No Navigation)" page template?

                    That way you don't need to have any JavaScript code on you page.


                    Hope this helps


                    • 7. Re: How to hide sidarbar menu dynamically?

                      Thanks Justin it all works now


                      Max I cannot use a page template since I need same page to be normal or modal page.


                      Below is the page normal page complex search screen (page navigation is a manual DA and u see 2 blue bars)


                      Below is the same page used as a custom LOV page (no blue bars, modal page, user has to select close and cannot switch to another page).


                      I could have duplicated the page but since its complex I tried to just use the same page and JS/css to make it work.