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>
Related
I have a Checkbox using Bootstrap checkbox-inline and the checkbox is embedded in the text prompt "Remember me on *this computer" - checkbox appears in the location indicated by *.
This is using a code snippet from Ruby on Rails tutorial (Hartl) Chapter 9 using the code segment pasted below.
How do I get the checkbox to appear before the prompt? Running this on C9 / AWS
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :remember_me, class: "checkbox inline" do %>
<%= f.check_box :remember_me %>
<span>Remember me on this computer</span>
<% end %>
<%= f.submit "Log in", class: "btn btn-primary" %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>
As far as Bootstrap is concerned, that tutorial seems to be a bit outdated. (not surprising given that the release version of Bootstrap 4 is barely a month old at this point).
Edit:
I only realized what you actually wanted after editing your question (the asterisk was hidden initially, so it was a bit confusing)
Now, in order to make the checkbox appear between the words "Remember me on" and the words "on this computer", you need the following HTML structure in Bootstrap 4:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-check form-check-inline">
<label class="form-check-label mr-2">Remember me on</label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">this computer</label>
</div>
And if you want it the checkbox to appear before the entire prompt, you'll need the following HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Remember me on this computer</label>
</div>
Adjust your Rails code accordingly.
For more options, check out this reference:
https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios
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.
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 am trying to initiate a variable showName when the page loads. It worked fine when I did it using just angular but when I implemented it with rails(with embedded ruby tags) I am not able to hide the text field and save button as my variable gets undefined. I have tried couple of ways and ended with no result.
Here is my code. Any help is really appreciated. Thanks.
Edit.html.erb:
<div class="row" ng-controller="EditUserCtrl">
<div class="col-md-6 col-md-offset-3" id="editForm">
<%= form_for(#user) do |f| %>
<h1 id="editHeader">Account Information </h1>
<%= render 'shared/error_messages' %>
<div class="form-group">
<%= f.label :name, "Full Name:" %><br>
<div class="row">
<div class="col-sm-7">
<div ng-hide="showName">
<%= f.label :name, #user.name , id:"editFields" %>
</div>
<%= f.text_field :name, { :'ng-show' => 'showName'}%>
</div>
<div class="col-sm-5" ng-show="showName">
<%= f.button "Save", :action => "update_name" , :method => :put, class: "btn btn-primary", :'ng-click' => "clicked()", id:"editAccount" %>
</div>
<div class="col-sm-5" ng-hide="showName">
<i id="nav-cart-count" class="glyphicon glyphicon-edit"></i> Edit
</div>
</div>
</div>
<% end %>
</div>
Use ng-init to initialize the variable
<div class="row" ng-controller="EditUserCtrl" ng-init="showName = true">
I am using zurb foundation css in my rails application. I am having trouble centering the submit button in the form. The button is always at the left.
<%= form_for #campaign do |f| %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :content %>
<%= f.text_area :content %>
</div>
<%= f.submit :class => "button radius success text-center", :value => "Create" %>
<% end %>
There has to be a simple class that I am missing.
To center a button you need to wrap it in a element with the text-center class.
Thats just how centering elements with CSS the text-align property works - it will center inline and inline block child elements. But not itself.
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet"/>
<form>
<div class="field">
<label>Name</label>
<input type="text">
</div>
<div class="field">
<label>Name</label>
<textarea></textarea>
</div>
<div class="text-center">
<input type="submit" class="button radius success" value="Create">
</div>
</form>