Last few components in the component menu are not accessible on small screen

[vinodMS]

Steps to reproduce the issue

Possible to reproduce if a Joomla! instance uses many components and the entire submenu items are not visible on the screen.

Expected result

Ideally all the sub-menu items should be visible when scrolling down or at least should be able to navigate with arrow keys.

Actual result

Not possible to access last few items on components list (see screenshot).

System information (as much as possible)

Joomla! 3.3.6
Screen size 13,3-inch (2560 x 1600)

Additional comments

[sovainfo]

Workaround see http://forum.joomla.org/viewtopic.php?f=706&t=825242#p3102613

[zero-24]

@sovainfo can you send your code as PR?

[sovainfo]

Don't consider that workaround a proper solution to be implemented in core.

[zero-24]

ok thanks @sovainfo

[vinodMS]

Thanks for the heads up. Do you have a rough timeline as to when this build would be released?

[sovainfo]

@vinodMS Guess your reply was meant for J3.4.
@zero-24 Do you like this?:

[brianteeman]

updated title

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5131.}

[zero-24]

@sovainfo can you provide code? I think we need here some one with UI/UX skills that can tell us what is the best. Maybe someon from the PLT? It looks like a valid issue. @Bakual @wilsonge @roland-d @Kubik-Rubik @rdeutz ?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5131.}

[sovainfo]

Code can be provided, current implementation is having some strict messages that need be corrected first.
Considering the lack of feedback won't waste my time unless there is serious interest.

See code at http://forum.joomla.org/viewtopic.php?f=706&t=825242&p=3256916#p3256916

[zero-24]

ok thanks @sovainfo so I hope PLT can have a look here.

[sovainfo]

Currently it is implemented as hardcoded. So, when it should be optional, it requires a setting in Global Configuration. Or maybe someone can think of a different trigger to activate it.

[infograf768]

BTW, the issue is not only for components, but also for menus.
Example:

[sovainfo]

@infograf768 Would you like to see the menu organized by language or by first letter as I suggested for components? Would you want a Menu component setting for a choice?
Or do you have specifications for how the menu should work in a multi lingual setup?

[infograf768]

Someone may have same issue when not in mulilanguage.
Therefore the solution has to be global, imho.
The best, if possible, would be to have a scrollbar showing depending on the window height (Taking into account the status bar), as this would fit all cases.

[SwingShoes]

I agree with Infograf768. A Scrollbar would be a simplistic solution
It could also just scroll down as a user arrows-down or scrolls down like many other template menus.
Please let us know an ETA for this solution. It's embarrassing that issues like this are on the Administrator side...embarrassing for website managers (esp in front of clients) and the Joomla community.

[SwingShoes]

This issue is still unresolved in Joomla 3.4.1.
Why would the administrator menu continue to have this simplistic problem which plagues smaller net-books and smaller screens?
Please let us know an ETA for resolution.

[Bakual]

Please let us know an ETA for resolution.

Unfortunately as long as nobody provides a PR to fix this, it will still be the same in a year.

[SwingShoes]

Can someone please make the correction and add it to the next update of Joomla (since this should not be a core hack)?

[roland-d]

@dgt41 Dimitris, since you are doing a lot with JavaScript, could you please have a look at this and provide a proposed solution?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5131.}

[dgrammatiko]

@roland-d Roland by saying "proper solution" you mean turn the dropdown menu to scrollable?

[roland-d]

@dgt41 Reading the issue I think making the dropdown scrollable is good enough for now, perhaps it is just good :) At least it will allow us to see all entries in a large dropdown.

[dgrammatiko]

@roland-d after some tests and some tricks I always end up with a catch 22 situation:
In order to have deeper level menus we cannot have scrollable list

The only way out of this I can see is to change the menus so that the deeper level items are rendered below the parent menu item, eg:

But of course this is quite a big UX/UI change so I guess there must be a decision to either follow that path or chase another solution (@sovainfo also propose to group menus alphabetically)

[dgrammatiko]

If anyone wants to work on this, my initial idea is to get the functionality from the small screens adapted for the bigger screens. Here is some css to get someone started:

/* expand deeper menu items so we can use scrollable ul */
@media (min-width: 767px) {
    body {
        padding-top: 0;
    }
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        position: static;
    }
    .navbar-fixed-top {
        margin-bottom: 18px;
    }
    .navbar-fixed-bottom {
        margin-top: 18px;
    }
    .navbar-fixed-top .navbar-inner,
    .navbar-fixed-bottom .navbar-inner {
        padding: 5px;
    }
    .navbar .container {
        width: auto;
        padding: 0;
    }
    .navbar .brand {
        padding-left: 10px;
        padding-right: 10px;
        margin: 0 0 0 -5px;
    }
    .nav-collapse {
        clear: both;
    }
    .nav-collapse .nav {
        float: none;
        margin: 0 0 9px;
    }
    .nav-collapse .nav > li {
        float: left;
    }
    .nav-collapse .nav > li > a {
        margin-bottom: 2px;
    }
    .nav-collapse .nav > .divider-vertical {
        display: block;
    }
    .nav-collapse .nav .nav-header {
        color: #555;
        text-shadow: none;
    }
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        padding: 9px 15px;
        font-weight: bold;
        color: #555;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    .nav-collapse .btn {
        padding: 4px 10px 4px;
        font-weight: normal;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .nav-collapse .dropdown-menu li + li a {
        margin-bottom: 2px;
    }
    .nav-collapse .nav > li > a:hover,
    .nav-collapse .nav > li > a:focus,
    .nav-collapse .dropdown-menu a:hover,
    .nav-collapse .dropdown-menu a:focus {
        background-color: #f2f2f2;
    }
    .navbar-inverse .nav-collapse .nav > li > a {
        color: #f5f5f5;
    }
    .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #10223e;
    }
    .navbar-inverse .nav-collapse .nav > li > a:hover,
    .navbar-inverse .nav-collapse .nav > li > a:focus,
    .navbar-inverse .nav-collapse .dropdown-menu a:hover,
    .navbar-inverse .nav-collapse .dropdown-menu a:focus {
        background-color: #10223e;
    }
    .nav-collapse.in .btn-group {
        margin-top: 5px;
        padding: 0;
    }
    .nav-collapse .dropdown-menu {
        position: absolute;
        top: 25px;
        left: 0;
        float: none;
        display: none;
        max-width: 260px;
        margin: 0 15px;
        padding: 0;
        background-color: #fff;
        border: 1px solid grey;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        overflow-y: scroll;
        max-height: 200px;
    }
    .nav-collapse .open > .dropdown-menu {
        display: block;
    }
    .nav-collapse .dropdown-menu:before,
    .nav-collapse .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .dropdown-menu .divider {
        display: none;
    }
    .nav-collapse .nav > li > .dropdown-menu:before,
    .nav-collapse .nav > li > .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .navbar-form,
    .nav-collapse .navbar-search {
        float: none;
        padding: 9px 15px;
        margin: 9px 0;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
        -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
    }
    .navbar-inverse .nav-collapse .navbar-form,
    .navbar-inverse .nav-collapse .navbar-search {
        border-top-color: #10223e;
        border-bottom-color: #10223e;
    }
    .navbar .nav-collapse .nav.pull-right {
        float: none;
        margin-left: 0;
    }
    .nav-collapse,
    .nav-collapse.collapse {
        overflow: hidden;
        height: 0;
    }
    .navbar .btn-navbar {
        display: block;
    }
    .navbar-static .navbar-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

The result is a scrollable menu with the deeper menus auto expanding bellow the parent menu:

This actually needs some improvements (right now is a very ruff cut). Currently I am too busy to finish this so anyone that wants to step in is very welcome.

[roland-d]

@dgt41 Thanks for the input and the setup. Doing this in CSS is above my paygrade :) Too bad there is no easy solution.

Another option, which existed in a previous version of Joomla, is that you get a page with all the components or menu items. I will see if someone can take a look at this next week at the PBF.

[brianteeman]

Closed - please test #9375

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5131.}