Search code examples
htmlcsstwitter-bootstrapangularbootstrap-material-design

position: relative; style destroying my select dropdown animation

Class col-md-6 destroying my ng-select dropdown animation

When I disabled it from browser's developer tool everything looks fine. When I replace styles of class col-md-6 to this :

.col-md-6 {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

everything works, but i can't just replace position: relative; for all my layout, so i need the solution that help me remove that style only for my select. i tried to overwrite class col-md-6 to another twin class but it doesnt seem to work properly. Works ONLY when i edit original col-md-6 class. Help me! i adding few snippets to make it clearly.

HTML:

<div class="container">
  <br>
  <br>
  <div class="row">
    <div class="col-md-6 my-broken-select">
      //this select conflict with "Example paragraf" 
      <mdb-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
      <label>Blue select</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
        <p>Example paragraf</p>
    </div>
  </div>
</div>

CSS:

//work!!
.col-md-6 {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
//NOT work!!
.my-broken-select {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
//NOT work!!
 .col-md-6.my-broken-select {
     position: static;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }
//NOT work!!
.my-broken-select {
    position: static!important;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

EDIT:

That may be important. Style from my twin class is assigned to my broken div but still doesn't work properly... but when I disable already disabled style from original col-md-6 its start working.

doesn't work:

enter image description here

http://prntscr.com/h48fkj

work:

enter image description here

http://prntscr.com/h48f93

Solution

  • Ok, I figure it out.
    The problem was that sneaky "Example paragraph" which still have position: relative;. That's why when I disable this style from original class everything starts working fine

    When I increase z-index that eliminates position: relative effects so the solution looks like this : 

     .my-broken-select {
    z-index: 1500
}

    that solved the problem.