Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdowns of Elements in Nav- or Topbar are in background #805

Closed
bschmelcher opened this issue Aug 3, 2023 · 1 comment
Closed

Dropdowns of Elements in Nav- or Topbar are in background #805

bschmelcher opened this issue Aug 3, 2023 · 1 comment
Assignees
Labels
bug Something isn't working version 1.x.x Version 1.x.x issues
Projects
Milestone

Comments

@bschmelcher
Copy link

Describe the bug
When a dropdown menu (doesn't matter if the deprecated DropDownMenu or Menu is used) is added to an ActionElement of Top- or Navbar, the dropdown is behind the Top- or Navbar when it is opened.

To Reproduce
Steps to reproduce the behavior:

  1. See code to reproduce
  2. Click the icons in the top right to open a dropdown using DropDownMenu or Menu
  3. Notice that the dropdowns accessed from the top bar are in the background

This is also visible in the current state of domino-ui when the dropdown of the Navbar is opened:
image

Expected behavior
The dropdowns accessed from the top and navbar should be in front of these elements.

Additional context
I think this is related to this change:
bcf80d8#diff-93bc27cd5254210c5869bf7cb7a8505168961220e077e48c5841273089ddd2fd

And there already was a Pull Request opened to fix this:
improve min z-index calculation. #782

Code to reproduce

public class ToReproduce implements EntryPoint {

    @Override
    public void onModuleLoad() {

        Layout layout = Layout.create("Dropdown Z Index Issue").show(ColorScheme.AMBER);

        LayoutActionItem topActionItem1 = new LayoutActionItem(Icons.MDI_ICONS.arrow_down_mdi().size36());
        Menu<String> menu = createMenu(new LeftDownDropDirection());
        topActionItem1.setDropMenu(menu);
        layout.addActionItem(topActionItem1);

        LayoutActionItem topActionItem2 = new LayoutActionItem(Icons.MDI_ICONS.arrow_down_mdi().size36());
        DropDownMenu dropdown = createDropDownMenu(topActionItem2, DropDownPosition.BOTTOM_LEFT);
        topActionItem2.addClickListener((Event evt) -> {
            DropDownMenu.closeAllMenus();
            dropdown.open();
            evt.stopPropagation();
        });
        layout.addActionItem(topActionItem2);

        Card card = Card.create();
        HeaderAction dropDownHeaderAction = new HeaderAction(Icons.MDI_ICONS.arrow_up_mdi());
        DropDownMenu cardDropdown = createDropDownMenu(dropDownHeaderAction, DropDownPosition.TOP_LEFT);
        dropDownHeaderAction.addClickListener((Event evt) -> {
            DropDownMenu.closeAllMenus();
            cardDropdown.open();
            evt.stopPropagation();
        });
        dropDownHeaderAction.addClickListener((Event evt) -> {
            DropDownMenu.closeAllMenus();
            dropdown.open();
            evt.stopPropagation();
        });
        card.addHeaderAction(dropDownHeaderAction);

        Menu<String> cardMenu = createMenu(new LeftUpDropDirection());
        card.addHeaderAction(new HeaderAction(Icons.MDI_ICONS.arrow_up_mdi()).setDropMenu(cardMenu));

        layout.getContentPanel().appendChild(card);

    }

    private DropDownMenu createDropDownMenu(BaseDominoElement dropDownHeaderAction, DropDownPosition dropDownPosition) {
        DropDownMenu cardDropdown = DropDownMenu.create(dropDownHeaderAction).setPosition(dropDownPosition)
                .appendChild(DropdownAction.create("option"))
                .appendChild(DropdownAction.create("option"))
                .appendChild(DropdownAction.create("option"));
        return cardDropdown;
    }

    private Menu<String> createMenu(DropDirection dropDirection) {
        Menu<String> menu = Menu.<String>create()
                .appendChild(MenuItem.create("option"))
                .appendChild(MenuItem.create("option"))
                .appendChild(MenuItem.create("option"))
                .setDropDirection(dropDirection);
        return menu;
    }
}
@vegegoku vegegoku self-assigned this Aug 27, 2023
@vegegoku vegegoku added the bug Something isn't working label Aug 27, 2023
@vegegoku vegegoku added this to To do in Domino UI via automation Aug 27, 2023
@vegegoku vegegoku added the version 1.x.x Version 1.x.x issues label Aug 27, 2023
@vegegoku vegegoku added this to the 2.0.0-RC2 milestone Aug 27, 2023
@vegegoku
Copy link
Member

vegegoku commented Sep 3, 2023

The logic that was implemented in the Layout is now removed, it seems it is causing more trouble than it solves. what ever issue that made us implement need to be re-evaluated. until an issue is reported by this change the logic will be removed.

@vegegoku vegegoku closed this as completed Sep 3, 2023
Domino UI automation moved this from To do to Done Sep 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working version 1.x.x Version 1.x.x issues
Projects
Domino UI
  
Done
Development

No branches or pull requests

2 participants