?
Referenced as Duplicate of: # 5663
avatar vinodMS
vinodMS
17 Nov 2014

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

screen shot 2014-11-17 at 13 38 48

avatar vinodMS vinodMS - open - 17 Nov 2014
avatar zero-24
zero-24 - comment - 19 Nov 2014

@sovainfo can you send your code as PR?

avatar sovainfo
sovainfo - comment - 19 Nov 2014

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

avatar zero-24
zero-24 - comment - 19 Nov 2014

ok thanks @sovainfo

avatar vinodMS
vinodMS - comment - 19 Nov 2014

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

avatar sovainfo
sovainfo - comment - 20 Nov 2014

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

avatar brianteeman brianteeman - change - 3 Jan 2015
Status New Confirmed
avatar brianteeman brianteeman - change - 3 Jan 2015
Labels Added: ?
avatar brianteeman brianteeman - change - 11 Jan 2015
Title
Last few components in the component list is not accessible on small screen
Last few components in the component menu are not accessible on small screen
avatar brianteeman brianteeman - change - 11 Jan 2015
Title
Last few components in the component list is not accessible on small screen
Last few components in the component menu are not accessible on small screen
avatar brianteeman
brianteeman - comment - 11 Jan 2015

updated title


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5131.
avatar zero-24
zero-24 - comment - 11 Jan 2015

@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.
avatar sovainfo
sovainfo - comment - 11 Jan 2015

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

avatar zero-24
zero-24 - comment - 11 Jan 2015

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

avatar sovainfo
sovainfo - comment - 11 Jan 2015

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.

avatar infograf768
infograf768 - comment - 11 Jan 2015

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

screen shot 2015-01-11 at 08 22 12

avatar sovainfo
sovainfo - comment - 11 Jan 2015

@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?

avatar infograf768
infograf768 - comment - 11 Jan 2015

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.

avatar SwingShoes
SwingShoes - comment - 25 Feb 2015

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.

avatar SwingShoes
SwingShoes - comment - 23 Mar 2015

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.

avatar Bakual
Bakual - comment - 23 Mar 2015

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.

avatar SwingShoes
SwingShoes - comment - 23 Mar 2015

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

avatar roland-d
roland-d - comment - 5 Sep 2015

@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.

avatar dgt41
dgt41 - comment - 5 Sep 2015

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

avatar roland-d
roland-d - comment - 5 Sep 2015

@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.

avatar dgt41
dgt41 - comment - 17 Sep 2015

@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:
modified

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)

avatar dgt41
dgt41 - comment - 18 Sep 2015

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:
screen shot 2015-09-18 at 6 15 18

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.

avatar roland-d
roland-d - comment - 3 Oct 2015

@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.

avatar brianteeman
brianteeman - comment - 14 Mar 2016

Closed - please test #9375


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

avatar brianteeman brianteeman - change - 14 Mar 2016
Status Confirmed Closed
Closed_Date 0000-00-00 00:00:00 2016-03-14 17:40:54
Closed_By brianteeman
avatar brianteeman brianteeman - close - 14 Mar 2016
avatar brianteeman brianteeman - close - 14 Mar 2016

Add a Comment

Login with GitHub to post a comment