I have a form with several fields (many of which are datepicker fields) and only three of them show these weird artifacts
Here are the same fields in Chrome, but it appears the same on every other browser... including Safari on Windows (on a different computer, not a VM or parallels)
Here is the relevant code:
<legend>Delivery Information</legend>
<div class="form-group">
<%= f.label :start_date,
"Start Date <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :start_date, class: "form-control datepicker",
required: false,
value: (model.start_date.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
<div class="form-group">
<%= f.label :end_date,
"End Date <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :end_date, class: "form-control datepicker",
required: false,
value: (model.end_date.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
<div class="form-group">
<%= f.label :last_day_of_classes,
"Last Day of Classes <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :last_day_of_classes, class: "form-control datepicker",
required: false,
value: (model.last_day_of_classes.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
model is just because this is a shared form.
I have no idea why these fields are displaying this way... any ideas?
So. By changing the class name from datepicker to pickerDates on those three fields the carets have disappeared. I don't know why or how.
Related
I am new in RoR. I am trying to add css classes on my form. Here is my form:
<%= form_tag :action => 'create' do %>
<p><label for = "name">Name</label>:
<%= text_field 'books', 'name' %></p>
<div class="form-control">
<p><label for = "author">Author</label>:
<%= text_field 'books', 'author'%></p>
</div>
<p><label for = "price">Price</label><br/>
<%= text_area 'books', 'price'%></p>
<%= submit_tag "Create" %>
<% end -%>
That form controls does not accepting class="form-control mb-4 col-10" placeholder="Patient name" like <input type="text" th:field="*{name}" class="form-control mb-4 col-10" placeholder="Patient name">. How can I apply css styling.
You have to put the class behind a comma
<%= text_field 'books' :name, class:"form-control mb-4 col-10", placeholder="Patient name" %>
I've just started learning ruby on rails recently.
I've login form like this,
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="field">
<%= label_tag :email %><br />
<%= text_field_tag :email, params[:email], :class => 'form-control' %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="field">
<%= label_tag :password %><br />
<%= password_field_tag :password, :class =>'form-control' %>
</div>
</div>
</div>
</div>
I'm just trying to add bootstrap class form-control to email and password field but some thing went wrong, class value appeared at input field of password.
And I've got view like this,
The question might be stupid, any help suggestion is appreciated.
According to the documentation, the second parameter of password_field_tag method is value, so you should set it in order to set third parameter, where you can set the class:
<%= password_field_tag :password, nil, class: 'form-control' %>
For some reason when executing this code, the radio buttons that get created aren't mutually exclusive in getting picked. How do I make it so that users can only pick 1 radio button? This code is essentially going through a variety of addresses and allowing a user to pick an address for their order.
<div class="select-address select-address-row" style="display:none">
<% #order.user.addresses.each do |address, index| %>
<%= form_for #order, remote: true, :html => { :id => 'address-form-'+address.id.to_s} do |a| %>
<div class="col-xs-4 select-address-col">
<div class="enterprise-buy-address-box address-<%= address.id %>">
<%= address.shipping_name %><br>
<%= address.line_1 %><br>
<%= address.city %>, <%= address.state %> <%= address.zipcode %><br>
<% isDefault = address.shipping_name == #defaultAddress.shipping_name ? true : false %>
<%= a.radio_button :pickedAddress, 'Address', :checked => isDefault %>
<%= label :pickedAddress, '' %>
<div class="submit-address">
<%= button_tag(type: 'submit', class: "btn btn-xs btn-default address-custom-button-select address-"+address.id.to_s+"-button") do %>
select
<% end %>
</div>
</div>
</div>
<%= a.hidden_field :address_id, :value => address.id %>
<% end %>
<script>
$('.address-<%=address.id%>-button').click(function() {
$('.default-address').empty();
var selectedAddress = $('.address-<%=address.id%>').clone();
selectedAddress.find('.submit-address').remove();
$('.default-address').append(selectedAddress);
$('default-address').addClass("enterprise-buy-address-box");
$('.default-address').show();
$('.select-address').toggle();
$('.change-address-link').toggle();
});
</script>
<% end %>
</div>
Your form_for tag is inside of the loop for the addresses. Even if the name attribute is the same for all of your input type="radio" elements, they will not be mutually exclusive across different form elements. Move your form_for tag outside of the loop so that the radio inputs belong to the same form.
See the following snippet for demonstration:
<p>These won't work</p>
<form>
<input type="radio" name="foo">
</form>
<form>
<input type="radio" name="foo">
</form>
<p>These do work</p>
<form>
<input type="radio" name="bar">
<input type="radio" name="bar">
</form>
I'm using Devise for user registration. It automatically gives me the form for a new session:
<%= form_for(resource_name, resource, :url => session_path(resource_name)) do |f| %>
.
.
.
<% end %>
I have the email and password label and fields like so:
<div class = "field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class = "field">
<%= f.label :password %><br />
<%= f.password_field :password %>
</div>
But I'd like to add a class the the text_field and password_field so that I can style the boxes to make them look better.
<%= f.text_field :email, :class => "whatever" %>
did not work, so I looked in the Rails API and found a text_field method and did this:
<%= text_field(:user, :email, :class => "whatever" ) %>
which leaves out the "f" called in "form_for...do |f|". Even so, I'm pretty sure it worked because when I "View Source", the output ("id" and "name") matches:
<div class = "field">
<label for="user_email">Email</label><br />
<input id="user_email" name="user[email]" size="30" type="text" value="" />
</div>
<div class = "field">
<label for="user_email">Email</label><br />
<input class="whatever" id="user_email" name="user[email]" size="30" type="text" value="" />
</div>
This all seems great that it works and the source looks like it's fine, but I just want to get some confirmation from some more experienced developers to make sure that this definitely works and that there is nothing behind the scenes that is wrong before I make the change and have problems later.
Something else is wrong in your code.
<%= f.text_field :email, :class => "whatever" %>
Does what you want: you don't need to specify the user model, because the form builder (the f) knows which model it's dealing with.
For more info, read the introduction paragraph here: http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_field
I want to get focus to the text field on mouseover. How to do this? Now my code lookd like this
<div class='label_input'>
<%= f.label :username %>
<%= f.text_field :username %>
<div class='clearfix'></div>
</div>
Expecting similar to the HTML code
<input type="text" onmouseover="this.focus()"></input>
You could pass an onmouseover to text_field (docs).
Sometimes I just skip the erb and write the html
You can try:
<div class='label_input'>
<%= f.label :username %>
<input id="user_name" name="user[name]" size="30" type="text" onmouseover="this.focus()"></input>
<div class='clearfix'></div>
</div>
I find that in some cases the rails view helpers get more cumbersome than html. So, use what's most easy.
This way is really helpfull when you update select boxes with javascript.
<div class='label_input'>
<%= f.label :username %>
<%= f.text_field :username, onmouseover: "this.focus()" %>
<div class='clearfix'></div>
</div>