CODEWITHSUNDEEP
cssruby-on-railsbulma
jrkinnard
jrkinnard

Reputation: 37

CSS stylesheet not overriding Bulma.css class styles Rails 7

Having a CSS override issue, where Bulma CSS styles are not being overwritten when wrapped with the .field_with_errors DIV in Rails 7. View looks like the following:

<%= form_with(model: item) do |form| %>
  <% if item.errors.any? %>
    <%= render "layouts/errors", object: item %>
  <% end %>
  <div class="columns is-mobile">
    <div class="column is-half">
      <div class="field">
        <%= form.label :name, { class: "label" } %>
        <div class="control">
          <%= form.text_field :name, { class: "input is-info" } %>
        </div>
      </div>
      ....more below....

and application.css:

.field_with_errors input{
  border-color: #f14668;  
}

But when I'm throwing a validation error and Rails wraps the field in the .field_with_errors DIV, there's no override happening, how do I reverse this override order?

enter image description here

Upvotes: 0

Views: 542

Answers (1)

Septimiu Bloj
Septimiu Bloj

Reputation: 26

The styling that comes from Bulma takes precedence because it targets the input more specifically with the .is-info.input classes.

One easy way to override this is to use more specific targeting using classes, such as: .field_with_errors .is-input.input.

Upvotes: 1

Related Questions