WIP: Some bugs in dropdown multi level

Bugs
1

Browser: Chrome 116
OS: Windows
URL: try.bricksbuilder.io/t7b3ff1b/fvvv/

Hi bricks team,

I was checking out “multilevel” today when I came across a few bugs. These 4 bugs are fully mentioned in the video below, and I will share the nav menu template that I used in the video so that you can check its settings for troubleshooting if needed.

1- When hovering over items, if we consider a background color for the items, it will cause the border radius of the content to be ignored. The only solution is to add a hidden overflow for the content. But the problem is that after that, the next drop down (multi level) will not be displayed.

2- If we consider a hover color for multilevel text, when hovering, the color of the text and the icon are not coordinated with each other, and this is quite clear in the video.

3- When we move to the next dropdown, a border (1px) is added at the top, it is not clear where it comes from. But it seems that the drop content border is from the previous step…

4- When we set the padding from the item settings, this padding is applied to both the icon and the text. But why is it not applied to the parent div of the two? Currently, if we use the padding item, it creates a large space between the text and the dropdown icon, as you can see in the link above.

multilevel template file

2

Hi Hosein,
Thanks so much for your report!

  1. Unfortunately, this cannot be prevented across the board since the overflow is required. However, you can solve the problem by adding a “custom” border-radius to the first and last item (within the settings or with custom CSS):
root .brx-dropdown-content > li:first-child {
  border-radius: 10px 10px 0 0;
}

root .brx-dropdown-content > li:last-child, 
#brxe-blcxew .brx-dropdown-content > li.brxe-dropdown > .brx-submenu-toggle {
  border-radius: 0 0 10px 10px;
}

  1. Agreed, the hover state applies to the wrong selector in this case.

  2. We should also adjust the selector here.

  3. I will pass the question to the dev team.

Best regards,
timmse

1 Like