CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapsassrailstutorial.org
Juozas Beniušis
Juozas Beniušis

Reputation: 41

Michael Hartls RoR tutorial: scss is not targeting input

I am writing with regards to a problem I am facing while working through Michael Hartl's tutorial for Ruby on Rails. The problem is that css does not change appearance of input field for password confirmation. All other input fields appearances are affected by the css rules. Please find pictures and files below:

What I get:

// app/assest/stylesheets/custom.scss

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing;
}
# app/views/users/new.html.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user, url: signup_path) do |f| %>
      <%= render 'shared/error_messages' %>

      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form_control' %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

I've attempted to comment out line @include box_sizing; or give fixed height like height: 25px;, but it didn't help.

Any help would be appreciated!

Upvotes: 0

Views: 47

Answers (1)

Okomikeruko
Okomikeruko

Reputation: 1173

I can't tell you how many times this happened to me.

Check your spelling on your classes. Bootstrap commonly uses hyphens instead of underscores, and you've got a form_control class on your :password_confirmation field when it should be form-control

Upvotes: 1

Related Questions