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.
Related
I'm trying to set up a form on one of my pages that lists some info that should not be editable. My code for the page looks like this:
<%= form_for #quote do |f| %>
<h2 class='h2Title'>Follow Up Popup</h2>
<div class="field" id="msQuoteNumber">
<%= f.label "Quote Number:" %>
<%= f.text_field :quote_number %>
</div>
<% end %>
My page looks like this:
Right now I'm using f.text_field :quote_number to fill in the field with the quote_number from my database. This however lets the user type whatever they want into that field which I don't want. Is there a different method I can use besides text_field that just simply shows the quote_number as regular text?
To just display the input field and disable only in case of editing:
<%= f.text_field :quote_number, disabled: !(#quote.new_record?) %>
In Controller, just remove the key :quote_number from permitted attributes in case if you are editing so that no one can update the quote number after changing it via Inspect Element functionality of the browser and then submitting the form.
Use a label like the line above
Was:
<%= f.label "Quote Number:" %>
<%= f.text_field :quote_number %>
Change to:
<%= f.label "Quote Number:" %>
<%= f.label :quote_number %>
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;
}
I am trying to create articles for my blog. I got the controller working correctly, except for a spacing issue.
In my text-area field, when I type in paragraphs and hit return the paragraphs are morphed into one paragraph.
This is what the output looks like when I view the source code
<li><strong>jksdf</strong></li></br>
<li>This is the first sentence.
This is the second sentence.
This is the third sentence.</li>
When I view it in development, it looks like this
This is the first sentence. This is the second sentence. This is the third sentence.
Stack Overflow managed to get this to work in their app, so why can't I?
Here is my Index page
<ul class = 'articles-list'>
<% #article.each do |article| %>
<li><strong><%= article.title %></strong></li></br>
<li><%= article.body %></li>
<% if signed_in? && current_user.admin? %>
<li><%= link_to 'Edit', edit_article_path(#article)%></li>
<li><%= link_to 'Delete', article, method: :delete%></li>
<% end %>
<% end %>
</ul>
My New Articles page with the form
<h3>New Article</h3>
<div class = 'center'>
<%= form_for #article do |f| %>
<p>
<%= f.label :title, class: 'marker' %>
<%= f.text_field :title %>
</p>
<p>
<%= f.label :body, class: 'marker' %>
<%= f.text_area :body, :rows => "15" %>
</p>
<p>
<%= f.submit 'Submit', :class => 'btn btn-success' %>
</p>
<% end %>
</div>
My Migration File
class CreateArticles < ActiveRecord::Migration
def change
create_table :articles do |t|
t.string :title
t.text :body
t.timestamps
end
end
end
I don't see why it's rendering a space instead of a paragraph break.
Do I need to include linebreaks in my text box? I can't use gsub, that won't work either.
Edit: It might have to do with using the li html tag. Maybe that forces all text to one line.
Edit: No that doesn't work either. I tried replacing ul and li tags with div tags, and I still received the same error.
I've tried the following
Using Line Breaks in the text-area box
Replacing UL and LI tags with DIV tags
Try using simple_format on the displayed text:
<%= simple_format article.body %>
It should convert single line breaks into <br> tags and wrap paragraphs (bordered by double line breaks) in <p> tags. HTML essentially ignores line breaks which is why you need some markup inserted.
If you need additional formatting options you'll probably want to look at integrating markdown (or something similar) in your application using something like Redcarpet.
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 want to create a form that does not have a label, and instead puts the directions inside the actual input text field. I also want the directions to disappear when you click the text field.
Here is an example
http://www.dailyblogtips.com/wp-content/uploads/searchform.png
I know in html, you do something like this
<input type="text" name="s" id="s" value="Text to be displayed here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
But how can I accomplish this using rails form helpers.
Here is what I have so far
<div class="row">
<div class="small-12 columns">
<div class="panel">
<%= form_for(#message) do |f| %>
<%= f.label :body, "Description" %>
<%= f.text_area :body %>
<%= f.submit 'Create message', class: 'button small secondary' %>
<% end %>
</div>
</div>
</div>
I'd give the placeholder attribute a try, it'll only work with newer browsers but there are a few jQuery libraries that will automatically detect the ones that don't support it and perform more or less the same thing that your javscript snippet is doing. Here is an example of using the placeholder field:
<%= f.text_field :field_name, :placeholder => "Disappearing Text" %>
Edit: Here is a solid jQuery fallback plugin:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
In html, the pre-text in an input is called the placeholder attribute.
You can add that attribute into form_for looped fields like so:
<%= f.text_field :some_data, :placeholder => "value" %>
BUT, when doing the placeholder attribute, beware that its not completely supported across older versions of some browsers. So often some JS is required to polyfil this functionality...you should care about supporting this if you don't use traditional labels next to your input fields.