Dropdown menu overlapping with element

Apps (Frontend)
1

Dear One Data app builder support.

In the One Data App builder , I have a drop-down menu coming from a filter, which is supposed to be shown over an <h3> element or a button contained in a <div> underneath it.

The thing is that the text from the dropdown menu is always occluded by the <h3> or the text contained in the <div> , making me unable to pick any of the options in the dropdown menu when this happens.

I tried to follow the documentation for setting a z Index and tried to apply it, but I am still getting the same issue nevertheless: https://internal.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/layouts/FlexGrid.html#structure

See screenshot for a visual explanation of the issuevendor_name_issue

1 Like
2

Hi DanyEle,

have you tried to set the z index of the element below at z : ‘0’ and for the upper element z: ‘1’ or ‘2’?
Other than that you could try to color your background greyish and see if the elements overlap in the configuration. If they are heavily overlapping you may need to adjust it and put them further apart.

Cheers

3

Hi Kristina,

I already tried to set the z indices, but that did not work. I ended up puttng the elements far from one another so that they do not overlap, yet that is not actually a real solution.

4

Are there any other ideas/hints/workarounds on how to address this problem? This has not yet really got resolved:

2021_04_22_overlapping_issue
2021_04_22_overlapping_issue731×418 17.7 KB

EDIT: This just seems to happen with elements of the same type, like a filter’s dropdown overlapping over another filter, whereas a dropdown can overlap with a table with no issues whatsoever.

5

Not sure if this will come in handy for someone in the future, but a possible workaround to avoid the dropdown element from overlapping with other elements is adding the following invisible element to a layout in a page:

{

  "id": "htmlStyleElement_header",

  "type": "html",

  "config": {

    "html": ".o-multiselect__dropdown.o-multiselect__dropdown--wide { position:relative;} </style>"

  }

}

By using this element, the dropdown is going to expand to take up as much vertical space as is required to display the whole dropdown without overlapping over other components.

6

This issue has been solved.

Solution:

  • The order of the containers was the issue. The containers that are supposed to overlap the others need to be placed behind in the array.

  • Example: Container A should overlap Container B. Then the container config should look like this:

    containers: [{id: “ContainerB”}, {id: “ContainerA”}]

1 Like
7

Another Solution that worked in the case of Maggy:

Deleting the zIndex configuration from the filter container configuration (as partly done in the example app) actually resolved the issue in my App.