Mobile browsers cannot select Home in menu

[Carlos Hanson]

I would like to better understand the gluon.html.MENU helper with respect to mobile browsers.

When mobile is True, the main menu is rendered as a SELECT rather than a UL. Although the dropdown doesn't look pretty, I see the value in how a mobile user can select a menu item. However, a selection is activated by an onchange. I have found this to be a problem. Unless you set the second item in the tuple to make that item selected, you will never be able to get back to Home.

You can reproduce this on web2py.com. I tested on a Samsung Galaxy in both Chrome and Firefox. 

1. Go to web2py.com.
   
2. Open the menu.
   
3. Click About.
   
4. Open the menu, and you will see Home.
5. Click on Home and nothing happens.

When the second item in the tuple is set to False for all the menu items, the default selection is Home. Since it will not change if you select it, you cannot get Home.

Setting the second item in the tuple solves the problem until you go to a page that is not in the menu. My current solution in models/menu.py adds a menu item when going to such a page:

response.menu = [
    (T('Home'), (request.function=='index'), URL('default', 'index'), []),
    (T('About'), (request.function=='about'), URL('default', 'about'), []),
]

if request.function=='view':
    response.menu.append((T('View'), (request.function=='view'), None, []))

Personally, I don't like that solution.

I also wondered why other menus were not rendered the same way. A comment in the MENU class answered that: "Custom item aren't serialized as mobile". I like the look of the UL menus, but I also like the select mechanism for a SELECT menu. I am curious why that is the case.

Now that I think about it and after having looked at the code, I probably should just set is_mobile to False in layout.html. That will keep the user interface looking the same as the non-mobile version and prevent the onchange issue.

Has anyone come up with an alternate solution? What about adding "Menu" as the first item in the SELECT?

def serialize_mobile(self, data, select=None, prefix=''):
    if not select:
        select = SELECT(**self.attributes)
        select.append(OPTION('Menu', _value=None))
   

Thanks for your time.

Carlos

[Otto Domínguez]

I noticed that last night, but you know more than I do, so i'll watch this post for a solution. Thanks.