CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Archeg
Archeg

Reputation: 8462

Overriding css in dynamically generated element

I'm using bootstrap-select, which adds div on top of select. In other terms, I define:

<select id="@Html.IdForModel()" 
    name="@Html.NameForModel()" 
    class="selectpicker form-control" 
    data-live-search="true"></select>
...

 var selectBox = $('#@Html.IdForModel()');
 selectBox.selectpicker()

But in the page with Developer Tools I see:

<div class="btn-group bootstrap-select form-control">
  <button .../>
  <div class="dropdown-menu open" .../>
  <select .../>
</div>

Now I need this outer div to be "display:block", this fixes some layout problems I experience. But btn-group and bootstrap-select both apply "display:block-inline".

I've tried:

The only thing that has worked is selectBox.parent().css("display", "block"); but I would really like to have my styles in css files. Why doesn't css apply and what can I do about that?

Upvotes: 1

Views: 1072

Answers (1)

mbadeveloper
mbadeveloper

Reputation: 1270

You need to check if the style that apply bootstrap is marked as !important in this case css will not take your style in consideration.

I faced this problem before and the trick that is work is to create the same style with the same name of bootstrap in your page and change the properties as you like.

Upvotes: 2

Related Questions