I am trying to edit the font and styling of all form labels in my Rails app. Is there one CSS class I can use that will apply to all form fonts across the app?
The current section I am trying to change is:
<%= f.label :username %>
<%= f.text_field :username %>
<%= f.label :bio %>
<%= f.text_area :bio, :cols => "80", :rows => "10" %>
<%= label_tag "Profile Picture" %>
<%= collection_select(:user, :profile_picture_id, ProfilePicture.all, :id, :name, prompt: true) %>
I would like the :username, :bio, and "Profile Picture" labels to be in a different font without specifying a class parameter in each one.
You can apply your CSS rules to tags too:
In plain CSS:
label {
/* Attributes that apply to all label tags */
font: 16px sans-serif;
}
Related
This is my form code :
<%= form_for #user do |f| %>
<%=f.label :username %>
<%=f.text_field :username %><br>
<%= f.label :email %>
<%= f.text_field :email %><br>
<%= f.label :password%>
<%= f.password_field :password %><br>
<%= f.submit %>
<%end%>
I managed to center everything but the form!
You need to center the form with styles. For example:
<div class='center-form'>
<%= form_for(#user) do |f| %>
...
</div>
And then, in your stylesheets, add .center-form with required centerizing rules. Or you might do that without styles via Bootstrap. With "offset" rules (like offset-md-2) you might push div to center. But please refer to Bootstrap documentation to prototype and understand that.
I want to wrap this line of ruby in a select style in bootstrap but every time I do it breaks and lists all the generated options outside the form.
Here in the code I want to wrap
<%= f.label :user_description_id %>
<%= f.collection_select(:user_description_id, UserDescription.all, :id, :description, include_blank: true) %>
You should be doing somethin linke this:
<%= f.label :user_description_id %>
<%= f.collection_select(:user_description_id, UserDescription.all, :id, :description, {include_blank: true}, {class: "css-class"} ) %>
Reference: http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select
This is my form for now in my new_html_erb.
We are doing a promotion for the next two weeks
<%= simple_form_for #subscription, :html => { :class => 'form-horizontal'} do |f| %>
<%= f.input :manual_expiry_date %>
<%= f.association :user %>
<%= f.button :submit, :class => 'btn btn-primary'%>
<% end %>
I have used twitter bootstrap on and off. The form that I am working on for a rails application is using bootstrap.
How do I add bootstrap datepicker to manual_expiry_date ?
How do I center my simple_form_for?
I have tried putting the form in a container, then a row, then adding form control all in divs. There was no marked change. I have tried adding it as a class to simple_form but still the same.
Thank you for the help.
Twitter Bootstrap dont have in his core a date-picker, buy you can use "DatePicker For Bootstrap" www.eyecon.ro/bootstrap-datepicker/
You need to specify the class of the object
<%= f.input :manual_expiry_date, input_html: { class: 'date_picker' } %>
and then
$('.date_picker').datepicker()
I have excel, video, and multiple choice boolean columns in my Step model. I am trying to get it so the user has to choose one of the three, and when saved it passes back to the database as true. Right now my two problems are a)when I select one, it doesn't deselect the others and b) the radio button is on a different line than the text that labels it. Any help would be appreciated.
<fieldset class="stepCreator">
<%= "Step" %>
<%= f.label :description, "Description" %>
<%= f.text_field :description %>
<div>
<%= f.label :excel, "Excel" %>
<%= f.radio_button(:excel, true, :checked => true) %>
<%= f.label :video, "Video" %>
<%= f.radio_button(:video, true) %>
<%= f.label :multiple_choice, "Multiple Choice" %>
<%= f.radio_button(:multiple_choice, true) %>
</div>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "btn btn-danger btn-mini remove_fields "%>
</fieldset>
Actually you have 2 very different problems.
All the radio buttons (that you want to select one and automatically deselect the others) must have the same name, and different values, so it should be something like:
f.radio_button(:media, :excel, :checked => true)
f.radio_button(:media, :video)
For the labels to be at the same line as the checkbox, you just have to change the CSS.
From the documentation:
http://guides.rubyonrails.org/form_helpers.html
try:
<%= radio_button_tag(:age, "child") %>
<%= label_tag(:age_child, "I am younger than 21") %>
<%= radio_button_tag(:age, "adult") %>
<%= label_tag(:age_adult, "I'm over 21") %>
radio buttons have to select the same attribute in your model, in this example i selected the age attribute and i can give it 1 of two values, or he is a child or he is an adult
hope it helps
I'm using a form in Rails with a text area. This is good, except that the text area is resizable by the user. I don't want the user to be able to resize it. How can I do that?
<%= form_tag "doit", :id => "doit_form" do -%>
Names <br/>
<%= text_area_tag "names", nil, :rows => 4, :cols => 50 %> <br/>
Date <br/>
<%= text_field_tag "date" %> <br/>
<%= submit_tag "Do it!" %>
<% end -%>
Use CSS:
textarea { resize: none; }
Works with most browsers. Older browsers don't have the handle to resize textarea fields so then it shouldn't be a problem anyway.