Navbar submenu not working on mobile devices

[Tropicalista]

It's possible to make it working on mobile?

[blackat]

@Tropicalista I don't understand your point, sorry, could you please describe your scenario a bit better?

In any case, the navbar is responsive as the one provided by Bootstrap. You can try resizing the window with the plunker example linked in the documentation and see how the navbar collapse in an icon.

[Tropicalista]

Yes I know. I mean on mobile only first level menu is clickable.

[blackat]

@Tropicalista sorry but I have tried to link state unknown to state 1, and it is clickable, I can go to state 1, this is the model I have used in the controller.

$scope.tree = [{
            name: "States",
            link: "#",
            subtree: [{
                name: "state 1",
                link: "state1"
            }, {
                name: "state 2",
                link: "state2",
                subtree: [{
                    name: "state unknown",
                    link: "state1",
                }]
            }]
        }];

In the demo, the router isn't configured to go to state named unknown so for this reason the click doesn't work, but if you define your own routing configuration or if you use and existing one as I have done it works.

In case, please, create a plunker reproducing the issue so I can have a look :wink: .

[blackat]

@Tropicalista I have not got any answer, if you find an issue, please reproduce it by means of plunkr and open a new one.

Have a nice day.

[Tropicalista]

Sorry for the late response:

go here http://embed.plnkr.co/zyxXk6w079OgswKHQgno/ enable developer toolbar and check mobile rendering. If I click on item menu, the first dropdown works as expected, the submenu is not showing.

Thanks

[blackat]

Hi @Tropicalista, I have done some tests on different browsers using the demo app I provide with the source code and I cannot reproduce the issue, I guess it is a problem related to plunker viewer.

I provide a video to show that the selection of state in the subtree works. http://screencast-o-matic.com/watch/cDnujB1QhM

I have done the same test on Firefox and Safari on Mac platform. If you have a bit of time and you work on windows platform, please try the demo I provide with the source code and tell me which browser you use so it might be possible to see what happens.

I have to improve the alignment of the items in order to get correct nesting even in mobile view and I will do in the next release. I am working on some unit tests and a unique directive to render all the tree and get things simpler.

For the time being I will keep the issue opened.

[blackat]

I have not any feedback from @Tropicalista so I close the issue, in case, please reopen it :wink:

[mcelotti]

The problem is that there's no mouseover on mobile devices, you can't do it, and therefore the submenu is not showing up. To simulate this bug you just have to activate the mobile mode in chrome. The submenu is made visible by the ".dropdown-submenu:hover" rule and a menu entry that has a submenu can also have a link, all this means that this library uses both actions (hover and click) to do the job. For mobile devices there's just one action, the click action, so a menu entry having a submenu could not be a link.

[blackat]

@mcelotti Hello, sorry for the late reply... to be honest I have not developed that with touch devices in mind, I should have a look and see what I can do 😉