Question

I have the following CSS class:

.table-price-item {
  vertical-align: middle;
  margin-bottom: 10px;
  font-size: 0.875em;
  padding-right: 5px;
}

And the following input in simple_forms:

  <%= f.input :price, :input_html => { :class => "table-price-item" }, 
    :label => false, :as => :string, :readonly => true %>

When the form renders I get this

<input class="string optional readonly table-price-item" ...

The table-price-item doesn’t get applied because it’s overridden with this:

textarea, input[type="text"], input[type="password"], input[type="datetime"], 
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], 
input[type="week"], input[type="number"], input[type="email"], input[type="url"], 
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input 

from bootstrap. How can I get it to override that last one?

BTW the table-price-item is also applied to select2 and other items on that form.

Order in which css are linked:

<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />

Answer 1

Finally found the solution.

Since the classes are described in more detail in bootstrap they got overriden.

One way to solve this is by adding !important

.table-price-item {
  vertical-align: middle !important;
  margin-bottom: 10px !important;
  font-size: 0.875em !important;
  padding-right: 5px !important;
}

Then they do get priority and get applied!