Search code examples
htmlcsscss-positionbootstrap-select

CSS positioning (relative, absolute inside relative) + overlapping issue?

I have a structure like this https://jsfiddle.net/znpruua1/

However, I am having trouble at http://wereviewapp.com/App/Post

Absolute Container , inside relative container

Login at : http://wereviewapp.com/Login Credentials:

email : [email protected] 
pass : xtyxty1

in the second combobox named category cannot display it's dropdown properly.

I have had already solved the issue :

.bootstrap-select .dropdown-menu {
  max-height: 192px !important;
  max-height: 19.2rem !important;
}
.bootstrap-select .dropdown-menu .inner {
  max-height: 140px !important;
  max-height: 14rem !important;
}

However, is there any other good approach?

My concern is to learn what is causing the problem. Why I need to add that max-height? It should work just fine as it was in the jsfiddle.

All the relative contents are in same level so there shouldn't be any problem. Any absolute element inside the relative container should grow and show up on top of the underlying div container.

Solution

  • I think you should set a data-container, because the default one seems to be the body, and bootstrap-select injects height values by javascript. You can find more info here:

    https://silviomoreto.github.io/bootstrap-select/examples/#container

    Your main container is #wrap, so you can try adding the attribute data-container="#wrap" to your select html tag.

    <select class="selectpicker" data-container="#wrap">
    ...
</select>