position: relative; style destroying my select dropdown animation

Question

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:

http://prntscr.com/h48fkj

work:

http://prntscr.com/h48f93

I tried but did not work too. please look at my updated question — Witold Tkaczyk, Oct 31 '17 at 07:41
added to twin class didn't work, but added to original - work. — Witold Tkaczyk, Oct 31 '17 at 07:44
this will be hard because I use Angular, but I will try put all my html — Witold Tkaczyk, Oct 31 '17 at 08:00
This makes no sense - going by your "EDIT" screenshots you can clearly see it is working, *it is over-qualifying* the default `position: relative` styles of `.col-md-6`, that's why it's crossed-out. There is no way a simple selector like `.col-md-6` could over-qualify a selector with more specificity like `.col-md-6.my-broken-select` or one with a rule that uses an `important` declaration - or even a style rule declared `inline`. There's something else going on here, there seems to be no indication that this is a specificity issue. If you can set up an Fiddle as a MCVE that might prove useful. — UncaughtTypeError, Oct 31 '17 at 08:07
examples in my question are all my code. here is my code in plunker: https://plnkr.co/edit/xSpgWxtJ7uxO1kGF8iYZ?p=preview. — Witold Tkaczyk, Oct 31 '17 at 08:55
Please take a look at: https://stackoverflow.com/help/mcve As it stands your live example produces no code for us to work with, troubleshoot or debug. — UncaughtTypeError, Oct 31 '17 at 09:02
because I use a paid module that generates `mdb-select` I can't put this to my snipped. when I delete styles position: relative - animation works in case `position: relative` is still there - it doesn't work. like in my question I don't know what I can add more. this select is very similar to this from angular material — Witold Tkaczyk, Oct 31 '17 at 09:11

Mhd Alaa Alhaj · Answer 1 · 2017-10-31T07:54:18.750

0

Without the use of !important you can easily override your code it's all about organize your code, I mean if you define .my-broken-select after .col-md-6 it should override it correctly, hope this Fiddle solve your issue.

Update

If you are using Bootstrap just put your custome css link after Bootstrap css link, see below to understand:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="Bootstrap.css">
    <link rel="stylesheet" type="text/css" href="yourCustomeStyle.css">
  </head>
  <body>

    <!-- yourContent -->

  </body>
</html>

edited Oct 31 '17 at 07:54

answered Oct 31 '17 at 07:46

Mhd Alaa Alhaj

2,438
1
11
18

I want to edit this without touching my minified .css file. I editing this in my app.component.scss file. look at my EDIT section. this style is overwritten although it didn't work – Witold Tkaczyk Oct 31 '17 at 07:50
This is angular and I use specified css file only for my component. these styles are already overwritten, look at my EDIT section – Witold Tkaczyk Oct 31 '17 at 07:58
add `!important` to `position: static` **but you have to use** `.col-md-6.my-broken-select` **not only** `.my-broken-select` check again and update me with the result – Mhd Alaa Alhaj Oct 31 '17 at 08:03
it's not in your question just check again because it should work – Mhd Alaa Alhaj Oct 31 '17 at 08:07

Witold Tkaczyk · Accepted Answer · 2017-10-31T09:43:53.990

0

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.

edited Oct 31 '17 at 09:43

answered Oct 31 '17 at 09:35

Witold Tkaczyk

695
8
18

position: relative; style destroying my select dropdown animation

2 Answers2