Struggling with the col-md-6 class affecting my ng-select dropdown animation.
After disabling it in the browser's developer tools, everything looks fine. Substituting the styles of the col-md-6 class with the following helps:
.col-md-6 {
position: static;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
Although this solution works, I can't change the position: relative; for my entire layout. I need a way to remove that style just for my select element. Attempting to overwrite the col-md-6 class with a new twin class did not produce the desired results. It only works when editing the original col-md-6 class directly. Assistance needed!
Providing some snippets for clarity:
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:
//works!!
.col-md-6 {
position: static;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
//does not work!!
.my-broken-select {
position: static;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
//does not work!!
.col-md-6.my-broken-select {
position: static;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
//does not work!!
.my-broken-select {
position: static!important;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
EDIT:
An important note: The styling from my twin class is applied to my broken div but still does not function correctly. However, disabling the already disabled styles from the original col-md-6 makes it start working.
Not working:
https://i.sstatic.net/8EnK7.png
Working: