I am using the Devise gem for a user login page and user registration pages on a basic Ruby on Rails app. I want to get rid of the ugly default styling for when there is an error. I was able to replace the error box with some bootstrap styling, but I can't find any answers about how to get rid of the ugly red boxes that appear around my inputs and my input labels. Also, the inputs are shrinking when validation occurs. They start at 100% width. Then, if there is an error,they shrink. Here is an image of both problems. The input box should be as wide as the .danger div above:
Here is the code for this page:
<div class="row">
<div class="top col-md-4 col-md-push-4 col-sm-6 col-sm-push-3 col-xs-10 col-xs-push-1">
<div class="logo_container">
<%= image_tag "musilogopurple.png", class: 'logo_big' %>
</div>
<p class="text-center">Forget your password? Enter your email below and we will send you reset instructions.</p>
<br />
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: 'form-control' %>
</div>
<div class="actions">
<br />
<%= f.submit "Send", class: 'btn btn-purple'%>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
I would very much appreciate some guidance. Thank you!
Did you scaffold anything? Scaffolds bring in CSS files try deleting those if you're not using it. In addition, it would help if you posted the CSS files it's receiving styling from.
Related
This is _login.html.erb partial from Spree github page:
<%= form_for Spree::User.new, as: :spree_user, url: spree.create_new_session_path do |f| %>
<fieldset id="password-credentials">
<div class="form-group">
<%= f.email_field :email, class: 'form-control', tabindex: 1, placeholder: Spree.t(:email) %>
</div>
<div class="form-group">
<%= f.password_field :password, class: 'form-control', tabindex: 2, placeholder: Spree.t(:password) %>
</div>
<div class="checkbox">
<label>
<%= f.check_box :remember_me %>
<%= f.label :remember_me, Spree.t(:remember_me) %>
</label>
</div>
<div class="form-group">
<%= f.submit Spree.t(:login), class: 'btn btn-lg btn-success btn-block', tabindex: 3 %>
</div>
</fieldset>
<% end %>
but in reality when go to that page that form is built-in in panel with heading "Login as Existing customer".
from where it comes?
That comes from a different template, located here: https://github.com/spree/spree_auth_devise/blob/master/app/views/spree/user_sessions/new.html.erb.
If you search Spree's code for the sentence 'Login as Existing Customer', you'll see it's present in their locales with the key login_as_existing.
A little more digging, and I found the key on line five of the template linked above (as well as a couple of other locations). You can replace this in the same way you have the login form, or adjust the locale if you'd prefer different terminology. And a final third option, you can use Spree's deface overrides.
Tricky to track down these views sometimes, though search the main repo and any of the included extensions and you should be able to track anything down :)
I'm having a hard time to set an icon inside my input in my form_for in rails 5!
i already tried many different ways to do it but nothing is working
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: "form-control" do %>
<%= fa_stacked_icon "twitter", base: "square-o" %>
<% end %>
</div>
I would like to know how can i do to set the icon inside my input
thanks
You will need CSS to do it, here's how:
Go here and get the unicode value of the icon you want.
Add it as either value or placeholder attribute to your input using raw method (otherwise it will output the code).
Style your input with "font-family: 'FontAwesome';".
For example (using stack-overflow code ):
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: "form-control", value: raw(""), style: "font-family: 'FontAwesome';" %>
</div>
And you're good to go; check the snippet:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<input type="text"
value=""
style="font-family: 'FontAwesome';"/>
This will keep the icon visible in the beginning of the text box:
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><%= fa_icon "twitter" base: "square-o" %></span>
</div>
<%= f.text_field :name, class: "form-control" %>
</div>
</div>
I have a very simple website that has a scaffold articles with a string title, and text description. Sometimes my submit button doesn't work for edit and new. Then after I refresh the page the buttons start to work again. I'm using bootstrap-sass 3.3.6, rails 5.0.0.
This is the code for my form:
<%= form_for(article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :title %>
</div>
<div class="col-sm-6">
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true%>
</div>
</div>
<br />
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :description %>
</div>
<div class="col-sm-6">
<%= f.text_area :description, rows: 5, class: "form-control", placeholder: "Body of the article", autofocus: true%>
</div>
</div>
</div>
<div class="form-group">
<%= f.submit class:"btn btn-primary btn-lg" %>
</div>
What could be causing this?
You have a stray </div> tag.
This type of error is most frequently one generated by invalid HTML. Various sources of errors can be:
missing < or >
HTML tag not closed
Orphaned HTML closing tag (where no
opening one is related);
Forms nested within table or tr tags (within td is
allowed).
If properly formatting html doesn't work for you, then it can be a turbolinks issue, you can try disabling turbolinks like :data-no-turbolink => true (just a patch not the solution)
I know the question is old, but I had the same problem and the fix above did not help (no stray tags). It turns out that closing the message/warning section in class="panel-heading" caused it. Removing this bootstrap class fixed the issue.
I found a custom form style i want to copy. however, it's hard for me to figure out how to integrate the rails into its style since it is much more complicated than examples I've been
able to find.
Specifically, I don't know how to call the specific classes the example uses in my rails app.
I would greatly appreciate some guidance on how to create my rails form in this style:
Basically, you need to do something like:
<%= form_for #listing, html: { class:'form-inline lead-big'} do |f| %>
<div class='form-group'>
</div>
<% end %>
and then in between the .form-group div, you can either use the same code that is provided on the Bootsnipp page, or you can use Rails Form Helpers.
So instead of this:
<div class="form-group">
<label for="name">Hello, I am <span>Your name</span></label>
<input type="text" id="name" placeholder="#maridlcrmn" required>
and
</div>
it could be:
<div class="form-group">
<%= f.label :name do %>
Hello, I am <span>Your name</span>
<% end %>
<%= f.text_field :name, id: "name", placeholder: "#maridlcrmn", required: true %>
and
</div>
See this page for more: http://guides.rubyonrails.org/form_helpers.html
Really cool form I must add!
Depends if you want to do the form for a model or just submitting info. If for mode, use form_for if to submit form_tag
<%= form_tag some_url_path, method: :get do %>
<div class="form-group">
<%= label_tag :name, raw("Hello, I am <span> Your name </span>")%>
<%= text_field_tag :name%>
and
</div>
...
<%end%>
I am using Devise in my web application and was wondering how to use a different button than the default one to submit information. I am attempting to embed it in a twitter boot strap modal, and use a button in the footer of the modal to submit the info, rather than the standard signup button. Here's what I have for code right now:
<div class="modal-body">
<h4>...</h4>
<p>...</p></b>
<p>...</p>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div>
<%= f.label :email %>
<%= f.email_field :email %>
</div>
<div>
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
</div>
<div>
<%= f.submit "Sign up" %>
</div>
<% end %>
</div>
<div class="modal-footer">
Close
Sign up
</div>
</div>
In essence, I am trying to make the button in this line
Sign up
do what the button in this line does:
<div><%= f.submit "Sign up" %></div>
Anybody out there have any experience with this?
you can just extend the form... say to cover the modal body and the footer too, and replace the link
do something like
<%= form_for ..... %>
<div class="modal-body">
your form fields should go here somewhere
.....
</div>
<div class="modal-footer">
Close
<%= f.submit "Sign up" %>
</div>
<% end %>
Because this seems a little too obvious, I'm not really sure I understood your question very well. If that's the case, let me know
A button is different than a link and think that you will have the issues. I have done very similar things recently and instead of using submit.
<input class="btn btn-success" type="submit"value="Submit" >
This is what I use in my rails applications inbetween the form tags. It's not as pretty as using rails, but it works.