Reputation: 3341
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)
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
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
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
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
Reputation: 196
You can try the following
Change list-style: none;
to list-style-type:none;
and remove *
from <li>* <%= msg %></li>
Upvotes: 0