Wt

When using Wt with the Bootstrap 3 theme, a Wt::WPopupMenu attached to an item in a right-aligned navigation menu is positioned at the far left edge of the page instead of directly below its menu item.

Steps to reproduce¶

1. Create a Wt::WNavigationBar.
2. Add a Wt::WMenu with Wt::AlignmentFlag::Right.
3. Add a Wt::WMenuItem to that menu.
4. Attach a Wt::WPopupMenu to the menu item using WMenuItem::setMenu().
5. Run the application with Wt::WBootstrap3Theme.
6. Click the menu item.

Expected behavior¶

The popup menu should appear directly below, and horizontally aligned with, the menu item that opened it.

Actual behavior¶

The popup is displayed to the left of the right-aligned menu area, but it is not aligned with the menu item that opened it. Its position is determined by the navbar’s CSS rather than by the triggering WMenuItem.

The likely conflict is Bootstrap 3's rule:

.navbar-right .dropdown-menu {
  right: 0;
  left: auto;
}

This rule changes the popup’s horizontal positioning after Wt calculates its location.

This is not applicable to Bootstrap 5 or a default theme.