monty_lennie
monty_lennie

Reputation: 3341

Rails tutorial chapter 7 sign up form error doesn't appear right

Working on a failed signup form with error and it currently appears visually off as in the image below:

There is a red box around the errors part which shouldn't be there and there is asterisks next to each list error which shouldn't be there and there is no error for password confirmation for some reason. Also all the input fields have shrunk and are overly highlighted red.

(please note for fun I changed the user resource to a dog resource)

enter image description here Here is my Custom css.scss

@import "bootstrap";


/* mixins, variables, etc. */

$grayMediumLight: #eaeaea; 

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

/* universal */

html {
  overflow-y: scroll;
}

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}


/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $grayLight;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  line-height: 1;
  &:hover {
    color: white;
    text-decoration: none;
  }
}
/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $grayMediumLight;
  color: $grayLight;
  a {
    color: $gray;
    &:hover {
      color: $grayDarker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 10px;
    }
  }
}

/* sidebar */

aside {
  section {
    padding: 10px 0;
    border-top: 1px solid $grayLighter;
    &:first-child {
      border: 0;
      padding-top: 0;
    }
    span {
      display: block;
      margin-bottom: 3px;
      line-height: 1;
    }
   h1 {
      font-size: 1.4em;
      text-align: left;
      letter-spacing: -1px;
      margin-bottom: 3px;
      margin-top: 0px;
    }
  }
} 

.gravatar {
  float: left;
  margin-right: 10px;
}

/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
}

Here is the new.html.erb

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

<div class="row">
<div class="span6 offset3">
    <%= form_for(@dog) do |f| %>
        <%= render 'shared/error_messages' %>

        <%= f.label :name %>
        <%= f.text_field :name %>

        <%= f.label :email %>
        <%= f.text_field :email %>

        <%= f.label :password %>
        <%= f.password_field :password %>

        <%= f.label :password_confirmation, "Password Confirmation" %>
        <%= f.password_field :password_confirmation %>

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

and lastely the shared/_error_messages.html.erb

<% if @dog.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-error">
      The form contains <%= pluralize(@dog.errors.count, "error") %>.
    </div>
    <ul>
      <% @dog.errors.full_messages.each do |msg| %>
        <li>* <%= msg %></li>
      <% end %>
    </ul>
  </div>
<% end %>

Ah and my DogsController incase that helps (interesting note the create action has a render 'new' but if I click on the submit button with invalid information it is redirected to the index url (/dogs) but still has the form with error?? It appears like that also on the tutorial but just found that interesting as a side note.)

class DogsController < ApplicationController
  def new
@dog = Dog.new
  end

  def show
@dog = Dog.find(params[:id])
  end

  def create
@dog = Dog.new(dog_params)
if @dog.save
    redirect_to @dog
else
    render 'new'
end
 end

private

  def dog_params
    params.require(:dog).permit(:name, :email, :password,
                               :password_confirmation)
  end
end

Any help is appreciated thanks!

Upvotes: 2

Views: 891

Answers (4)

Long Ma Gi&#225;o
Long Ma Gi&#225;o

Reputation: 60

The problems is : in scaffolds.scss there are

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;

  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px -7px 0;
    background-color: #c00;
    color: #fff;
  }

  ul li {
    font-size: 12px;
    list-style: square;
  }
}

delete them and your css work . But I suggest change id="error_explanation" to id="error_explanation_signup" (_error_messages.html.erb) for keeping original css.

Upvotes: 0

Paul
Paul

Reputation: 51

Check for existence of this file:

app/assets/stylesheets/scaffolds.css.scss

If you have this file, you probably used a scaffold generator.

Looks like it is taking precedence over other stylesheets, e.g. app/assets/stylesheets/custom.css.scss

You should be able to rename or delete the file to fix your problem.

Upvotes: 1

monty_lennie
monty_lennie

Reputation: 3341

Ok I fixed it by deleting everything from the scaffolds.css.scss. Not sure what this file is or how code got in here though.

Upvotes: 1

Crazy Programmer
Crazy Programmer

Reputation: 196

You can try the following

Change list-style: none; to list-style-type:none; and remove * from <li>* <%= msg %></li>

Upvotes: 0

Related Questions