Netgate Discussion Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    • Register
    • Login

    [ER] scrollable drop-down menus in pfsense_ng theme…

    Scheduled Pinned Locked Moved 2.1 Snapshot Feedback and Problems - RETIRED
    27 Posts 6 Posters 8.4k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C Offline
      ccesario
      last edited by

      Hello,

      This pull request https://github.com/bsdperimeter/pfsense/pull/141 improve menu css style removing some gifs, including more effects and automatic scroolbars to menus with more then 260px

      Tested in: Firefox 12/13, Chrome 19.0.1084.46, IE 8 and 9

      See the screenshot attached

      menu.png
      menu.png_thumb

      Carlos

      1 Reply Last reply Reply Quote 0
      • rcfaR Offline
        rcfa
        last edited by

        Big thumbs up for this one!!! Awesome! Now at least a device like an 11" MacBook Air or some netbook can be used comfortably. That was just like a birthday gift for me :D

        Now if we get the multiple selection stuff from "Chosen" in, the GUI will have taken a massive step forward.

        1 Reply Last reply Reply Quote 0
        • jimpJ Offline
          jimp Rebel Alliance Developer Netgate
          last edited by

          Github was reporting that it couldn't be merged in for some reason. Might need updated and resubmitted as a new pull request.

          Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

          Need help fast? Netgate Global Support!

          Do not Chat/PM for help!

          1 Reply Last reply Reply Quote 0
          • stephenw10S Offline
            stephenw10 Netgate Administrator
            last edited by

            260 pixels seems a bit low to me. I wouldn't want this on a standard machine if it didn't need it. What length menu can you fit on a netbook (1024x600) screen? In full screen mode?

            Steve

            1 Reply Last reply Reply Quote 0
            • P Offline
              phil.davis
              last edited by

              I use a netbook a lot, carry it around and plug it into an external monitor at home and work. It is annoying when dropdown lists, menus, dialog boxes etc extend down below the screen and I can't easily select the lower items, or press the OK button! When there is something to test, I am happy to put it through its paces, switching between the netbook screen and external monitor, seeing if things automatically adjust etc.
              Hopefully the scrollbars only appear if the menu won't fit on the screen - so people with big screens will never see them.

              As the Greek philosopher Isosceles used to say, "There are 3 sides to every triangle."
              If I helped you, then help someone else - buy someone a gift from the INF catalog http://secure.inf.org/gifts/usd/

              1 Reply Last reply Reply Quote 0
              • C Offline
                ccesario
                last edited by

                @jimp:

                Github was reporting that it couldn't be merged in for some reason. Might need updated and resubmitted as a new pull request.

                Ok Jimp. I resubmitted the pull request with my respository sync.

                thanks

                Carlos

                1 Reply Last reply Reply Quote 0
                • jimpJ Offline
                  jimp Rebel Alliance Developer Netgate
                  last edited by

                  Would there be some way to make that dynamic based on the window height? Seems that should only need to kick in for small screens. I do not want scrollbars on my full size window when it's capable of showing the whole menu.

                  Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                  Need help fast? Netgate Global Support!

                  Do not Chat/PM for help!

                  1 Reply Last reply Reply Quote 0
                  • C Offline
                    ccesario
                    last edited by

                    Well,

                    The this pull request https://github.com/bsdperimeter/pfsense/pull/144  add scrollbar in dropdown menu based in window height.

                    I think this may solve the problem of big and small screens

                    ;)

                    Carlos

                    1 Reply Last reply Reply Quote 0
                    • jimpJ Offline
                      jimp Rebel Alliance Developer Netgate
                      last edited by

                      I shrank my window's vertical size way down (it was a tiny strip across) and it didn't kick in for me… hmm.

                      Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                      Need help fast? Netgate Global Support!

                      Do not Chat/PM for help!

                      1 Reply Last reply Reply Quote 0
                      • jimpJ Offline
                        jimp Rebel Alliance Developer Netgate
                        last edited by

                        aha, had to clear cache first (or shift+reload)

                        Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                        Need help fast? Netgate Global Support!

                        Do not Chat/PM for help!

                        1 Reply Last reply Reply Quote 0
                        • jimpJ Offline
                          jimp Rebel Alliance Developer Netgate
                          last edited by

                          looks good! Though the menu could actually be a little longer. It's sized base on the height but it's leaving quite a bit of room under it

                          Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                          Need help fast? Netgate Global Support!

                          Do not Chat/PM for help!

                          1 Reply Last reply Reply Quote 0
                          • C Offline
                            ccesario
                            last edited by

                            @jimp:

                            looks good! Though the menu could actually be a little longer. It's sized base on the height but it's leaving quite a bit of room under it

                            Nice!

                            To increase menu size,  change the value '100' in line 32 of  file /usr/local/www/themes/pfsense_ng/loader.js
                            hwindow = (jQuery(window).height()-100);

                            I usage the formule: 'window.height - 100' to define menu size, so per example:  'window.height - 50'  increase the dropdown menu

                            :)

                            Carlos

                            1 Reply Last reply Reply Quote 0
                            • jimpJ Offline
                              jimp Rebel Alliance Developer Netgate
                              last edited by

                              35 seems to be the most comfortable fit for me, I committed that change. It leaves enough room for the bottom of the menu, the shadow, and few px worth of open space (Tried it on FF, Chrome, and Opera)

                              Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                              Need help fast? Netgate Global Support!

                              Do not Chat/PM for help!

                              1 Reply Last reply Reply Quote 0
                              • C Offline
                                ccesario
                                last edited by

                                @jimp:

                                35 seems to be the most comfortable fit for me, I committed that change. It leaves enough room for the bottom of the menu, the shadow, and few px worth of open space (Tried it on FF, Chrome, and Opera)

                                Cool!

                                Thank you :)

                                Carlos

                                1 Reply Last reply Reply Quote 0
                                • P Offline
                                  phil.davis
                                  last edited by

                                  I loaded:
                                  2.1-BETA0 (i386)
                                  built on Wed Jun 13 20:47:21 EDT 2012
                                  FreeBSD 8.3-RELEASE-p3

                                  Using Firefox 13.0 browser.

                                  As Jim did, I had to cleared my cache once to get the scrollbars happening.
                                  The scollbars happen based on the browser window size when I login. Works well for me.
                                  If I resize the browser window while logged in, the scrollbars don't come or go, the dropdown menu doesn't get longer or shorter. But I guess that is fine. The fine touch would be to make the dropdown menu sizing/scrollbar calculation get re-invoked from some window-resizing callback - then it would adjust itself automagically when the window is resized - but I have no idea about implementing stuff like this.
                                  I should have played more before posting - after resizing the window a simple page reload makes the menus and scrollbars adjust to the new window size. Also, selecting something from the menus makes a whole new page draw up, which also resets the menus and scrollbars to the new window size. All working very nicely for me.

                                  This is very handy when working from small screens. Particularly for the Diagnostics and Status menus, that are fairly long. Murphy's Law in this case states that you will always want to select the first item on the menu that is not visible. Now Murphy will have to think of something else  :)

                                  Thanks for this handy UI feature.

                                  As the Greek philosopher Isosceles used to say, "There are 3 sides to every triangle."
                                  If I helped you, then help someone else - buy someone a gift from the INF catalog http://secure.inf.org/gifts/usd/

                                  1 Reply Last reply Reply Quote 0
                                  • C Offline
                                    ccesario
                                    last edited by

                                    @phil.davis:

                                    I loaded:
                                    2.1-BETA0 (i386)
                                    built on Wed Jun 13 20:47:21 EDT 2012
                                    FreeBSD 8.3-RELEASE-p3

                                    Using Firefox 13.0 browser.

                                    As Jim did, I had to cleared my cache once to get the scrollbars happening.
                                    The scollbars happen based on the browser window size when I login. Works well for me.
                                    If I resize the browser window while logged in, the scrollbars don't come or go, the dropdown menu doesn't get longer or shorter. But I guess that is fine. The fine touch would be to make the dropdown menu sizing/scrollbar calculation get re-invoked from some window-resizing callback - then it would adjust itself automagically when the window is resized - but I have no idea about implementing stuff like this.
                                    I should have played more before posting - after resizing the window a simple page reload makes the menus and scrollbars adjust to the new window size. Also, selecting something from the menus makes a whole new page draw up, which also resets the menus and scrollbars to the new window size. All working very nicely for me.

                                    This is very handy when working from small screens. Particularly for the Diagnostics and Status menus, that are fairly long. Murphy's Law in this case states that you will always want to select the first item on the menu that is not visible. Now Murphy will have to think of something else  :)

                                    Thanks for this handy UI feature.

                                    Really this is a very handy when working from small screens (I usage)
                                    Thank you by feedback :)

                                    Carlos

                                    1 Reply Last reply Reply Quote 0
                                    • First post
                                      Last post
                                    Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.