Wt

Hello,

I am testing Dropdown Menu attached to Navigation Bar. I am using the following code to test the menu:

<code class="cpp">
class PopupMenuTest : public WApplication
{
    public:
        PopupMenuTest(const WEnvironment& env)
            : WApplication(env)
        {
            setTheme(new WBootstrapTheme());

            addMetaHeader("viewport", "width = device-width, initial-scale = 1");

            root()->addStyleClass("container-fluid");

#define POPUP_MENU_TEST

#ifdef POPUP_MENU_TEST
            WPopupMenu *ssm = new WPopupMenu();
#else
            WMenu *ssm = new WMenu();
#endif
            ssm->addItem("Menu Item 121");

            WPopupMenu *sm = new WPopupMenu();
            sm->addItem("Menu Item 11");
            sm->addMenu("Menu Item 12", ssm);
            sm->addItem("Menu Item 13");

            WMenu *m = new WMenu();
            m->addMenu("Test 1", sm);
            m->addItem("Test 2");
            m->addItem("Test 3");

            WNavigationBar *n = new WNavigationBar(root());
            n->setResponsive(true);
            n->addMenu(m);
        }
};
</code>

The POPUP_MENU_TEST is define to either use WPopupMenu or WMenu as the sub-menu of the menuitem "Menu Item 12" of the main PopupMenu attached to the Navigation Bar.

Following are the observations when I define POPUP_MENU_TEST (refer the attached image file Info_PopupSubMenu.png):

• The sub-menu appearance has an anomaly as described in my original post. After going through Bootstrap document, I realised that the dropdown sub-menu in Bootstrap is created by applying the class dropdown-submenu to li elements. But Wt's Bootstrap theme does not apply "dropdown-submenu" style class to dropdown sub-menus.
• The DOM node representing the sub-menu should be child of the menuitem to which it is attached. But after inspection of the DOM in debugger, it is clear that the sub-menu node is not the child of the menuitem to which this sub-menu is attached. Please refer the attached image file Info_PopupSubMenu.png.

Following are the observations when I don't define POPUP_MENU_TEST (refer the attached image file Info_MenuSubMenu.png):

• The sub-menu appearance is not similar to it's parent menu. After going through Bootstrap document, I realised that the dropdown sub-menu in Bootstrap is created by applying the class dropdown-submenu to li elements. But Wt's Bootstrap theme does not apply "dropdown-submenu" style class to dropdown sub-menus.
• The DOM node representing the sub-menu should be child of the menuitem to which it is attached. But after inspection of the DOM in debugger, it is clear that the sub-menu node is not the child of the menuitem to which this sub-menu is attached. Please refer the attached image file Info_MenuSubMenu.png.

How to get a visually consistent and correct dropdown sub-menu when using Wt's Bootstrap theme? The dropdown sub-menu is described on Bootstrap website here: http://twitter.github.com/bootstrap/components.html#dropdowns under the section Sub menus on dropdowns And here is a live example of how dropdown sub-menus look like in Bootstrap (check the menuitems of the "Personal" navbar dropdown menu): http://www.funkyjobs.de/

So how do I achieve the dropdown sub-menus uisng Wt's Bootstrap theme?

Thanks and regards,

~Plug

Hey,

Apparently a recent change messed up popup menu's in navigation bar; it's fixed now and your example works fine as far as I can tell.

The markup differences in Wt versus Bootstrap are intentional : Wt uses a different mechanism for popupmenu submenu positioning.

Regards,

koen

Yep, works now! Thanks!

But a better visual appearance of the parent of a submenu (note the caret at the end of the parent menuitem "Menu Item 12") happens when the code is modified as follows:

<code class="cpp">
class PopupMenuTest : public WApplication
{
    public:
        PopupMenuTest(const WEnvironment& env)
            : WApplication(env)
        {
            setTheme(new WBootstrapTheme());

            addMetaHeader("viewport", "width = device-width, initial-scale = 1");

            root()->addStyleClass("container-fluid");

            WPopupMenu *ssm = new WPopupMenu();
            ssm->addItem("Menu Item 121");

            WPopupMenu *sm = new WPopupMenu();
            sm->addItem("Menu Item 11");

#define SUBMENU_TEST
#ifdef SUBMENU_TEST
            WMenuItem *mi = new WMenuItem("Menu Item 12");
            mi->addStyleClass("dropdown-submenu");
            mi->setMenu(ssm);
            sm->addItem(mi);
#else
            sm->addMenu("Menu Item 12", ssm);
#endif

            sm->addItem("Menu Item 13");

            WMenu *m = new WMenu();
            m->addMenu("Test 1", sm);
            m->addItem("Test 2");
            m->addItem("Test 3");

            WNavigationBar *n = new WNavigationBar(root());
            n->setResponsive(true);
            n->addMenu(m);
        }
};
</code>

Why is the "dropdown-submenu" style removed from Wt's BootstrapTheme, are there any side effects of using it in Wt?

It would help to get a similar type of "caret" mark for the menuitems on the navigation bar. In the above example a caret facing downwards appearing next to the menu "Test 1" on the navigation bar would be a better visual.

Thanks and regards,

~Plug

Hey,

Good observation, I've added the dropdown-submenu support to the bootstrap theme.

The caret in the menu item is indeed something we should also support --- but requires more intervention from the theme, and is not that easy to do.

I've created a bug report for it: #1756

Regards,

koen