I've been looking for an existing answer to this question, but haven't found one. I am currently working on a Rails 3 project with some forms that have multiple choice/multiple selection questions with radio buttons and check boxes, respectively. I use the form builder style, like so:
<%= form_for [#profile,#answer], :method => 'put', :url => { :action => 'update' } do |f| %>
<% if #options.nil? %>
<%= #error_message %>
<% else %>
<% #options.each do |option| %>
<label for="<%= 'answer_response_' + option.downcase.gsub(' ','_') %>"><%= f.radio_button :response, option %><%= option %></label>
<% end %>
<% end %>
<div id="comments_area">
<p>Do you have any additional comments?</p>
<%= f.text_area :comments, :cols => 90, :rows => 5 %>
</div>
<%= submit_tag("Previous") %>
<%= submit_tag("Next") %>
<% end %>
#options is just an array of strings denoting each option to be displayed.
The labels work perfectly, attached to their respective radio button/check box. However, the text for the label always seems to show up on the next line no matter what I do. Example:
Describe yourself:
[]
Short
[]
Fun
[]
Bored
I have already tried using the f.label form helper after the f.radio_button/check_box as well, and it has the same problem. In fact, this is why I am doing the label tag "HTML-style" above (not using the ERB). Is this a styling problem that can be solved with CSS? If so, how can I put the label text on the same line after the respective check box/radio button?
For completeness' sake, this is how to resolve the multiline concern with an inline style (using haml)
= f.check_box :eula_accepted
= f.label :eula_accepted, "I accept the EULA", :style => "display:inline"
This could be a CSS issue, but more likely it's because you placed radio button INSIDE the label, when it should be before or after.
Try separating the two. If that doesn't change the outcome, look into input width - if your inputs are set to cover the entire line, that would push the text into the next line. To change alignment, you can also look into the CSS keywords "inline", "float" and possibly "vertical-align". Getting the Web Developer extension for Firefox can also help you figure out what's going on with the CSS, e. g. how much space an element is taking up.
Related
I have a multiple choice quiz game written in Rails. I am trying to write an integration test that clicks through the quiz, selecting the correct answers. Here is my view:
<h2>The word is: <%= #question %> <br> </h2>
<h2>Your score is <%= session[:score] %> </h2>
<h2><%= #questions_remaining %> questions left!</h2>
<% answers = #quiz_words.shuffle %>
<%= form_tag("answer", method: "get") do %>
<%= radio_button_tag(:answer, "#{answers.first.id}")%><%= answers.first.definition %><br>
<%= radio_button_tag(:answer, "#{answers.second.id}")%><%= answers.second.definition %><br>
<%= radio_button_tag(:answer, "#{answers.third.id}")%><%= answers.third.definition %><br>
<%= radio_button_tag(:answer, "#{answers.fourth.id}")%><%= answers.fourth.definition %> <br>
<%= hidden_field_tag :orig, "#{#quiz_words.first.id}" %>
<%= submit_tag("Submit") %>
<% end %>
<%= link_to 'Back to Index', root_path %> <br>
The correct answer is being generated in the html source as a hidden field id = 'orig' with the value as the answer.
I want Capybara to look for the hidden field and it's value ("13"), then in the next step, select the radio button that has the same value as the hidden field. Here is the html source that gets generated
I am new to Capybara and wasn't able to find if its possible looking through it's docs.
Is this possible, if so can someone show me how to do it or point me to the docs for this?
Is this the best way to test the quiz functionality? or would I be better testing it in another way? (unit tests?)
Yes, this is possible, and you likely want to use an integration test here.
Find the hidden input
Get it's value
Choose the radio with the value returned in step 2.
The only slightly complicated thing here is that you want to look for a non-visible element, which you can do with the visible: false option.
orig_value = find('#orig', visible: false).value
choose(option: orig_value)
I am trying to add a character counter to an app I am helping with but the app uses simple form gem for the page i need to work with. The Gem seems pretty cool expect that it auto generates the html and i need to figure out how to add my custom div after the label and the input so i can add the character count and change it as it goes.
I can do this with jquery but i am wanting to do an initial hard coded count for initial load just in case the user has an old browser without javascript.
<%= simple_form_for #organization do |f| %>
<div class="form-inputs">
<%= f.simple_fields_for :projects do |project| %>
<div class="row">
<%= project.input :description, :placeholder => 'What does your project do?', input_html: { class: 'project-description' }, :maxlength => 255 %>
<% end %>
I want to add the character limit to the description tag.
In formtastic, when create a semantic form, the layout of the object's attributes are always listed vertically (one attribute label & value occupy one row) by default.
How to customize the layout so that part of the attributes could be in horizental position. For example, I would like to have "body" attribute located on the right side of "title". How to do that?
<% semantic_form_for #post do |form| %>
<% form.inputs do %>
<%= form.input :title %>
<%= form.input :body %>
<%= form.input :section, :as => :radio %>
...
Formtastic provides lots of HTML class and id hooks on the wrapper <li> and elsewhere so that you can style different types of inputs generically (eg li.string) or specific inputs differently (eg li#user_email_input).
You can, as other answers mentioned, add extra classes to the wrapper with :wrapper_html => { :class => 'whatever' } to give yourself new hooks when the options above aren't suitable.
From here, it's purely a style/CSS problem. You probably want to float the <li> wrappers against each other with float:left; and then clear the floats on the containing <ol> with overflow:auto; or any other clearing technique of your preference.
You can use CSS to accomplish this task:
<%= form.input :title, :wrapper_html => {:class => "left"} %>
Then in your stylesheet:
.left
{
float: left;
/* etc. */
}
This will style the container of the form element (li by default)
You'd simple have to change the CSS. However I suggest you just build up the form elements yourself if you need layout customization for specific attributes.
I have a question about forms. I have a fairly standard form that saves a post (called an eReport in my app) with a title and body. The table also has a "published" field, which is boolean. The saved eReport only shows on the public site if this field is set to true, with false being the default.
Rather than the default check box, I would like to display two buttons at the end of the form: a "Publish Now" button and a "Save as Draft" button. If the user presses the former, the published field would be set to true. If the latter, then false. In PHP, I used to display 2 submit fields with different name values, then handle the input with an if/else statement to determine the proper SQL query to build. In Rails, I'm assuming I would place this logic in the controller, under the appropriate action, but I'm not sure how to manipulate the name or id values of buttons.
For the record, I'm using Formtastic, but if someone could show me how to do this with the default Rails form tags, that's OK too. Here's the code for my form as it stands right now:
<% semantic_form_for #ereport do |form| %>
<% form.inputs do %>
<%= form.input :title %>
<%= form.input :body %>
<% end %>
<% form.buttons do %>
<%= form.commit_button :label => "Publish Now" %>
<%= form.commit_button :label => "Save as Draft" %>
<% end %>
<% end %>
Thanks in advance for the help!
I don't know about formtastic, but with the default rails form builder, you could do it like this:
<%= form.submit "Save with option A", :name => "save_option_a" %>
<%= form.submit "Save with option B", :name => "save_option_b" %>
Then in the controller, you can pick those up in params:
if params[:save_option_a]
# do stuff
end
in addition to #iddlefingers answer, here is a view of the log of the application (striping some useless params due to explanation purposes)
Parameters: {"utf8"=>"✓", ..., "comentar"=>"Confirmar"}
where we can see that comentar is the name of the parameter, and "Confirmar" is it's value, which is the button's text too.
which was obtained by submit_tag "Confirmar", :name => 'comentar'
So in general you could have (if you want to reduce the number of params you are working with) several submit_tag "onevalue", :name => 'SAMEname', submit_tag "othervalue", :name => 'SAMEname'...
and retrieve them in your controller
if params[:SAMEname] == "onevalue"
# do stuff
elsif params[:SAMEname] == "othervalue"
#do different stuff
end
I think you need to use jQuery.
You can bind the button click event and submit the form for specified location.
I have a block -iterator to display a user and a related action to be displayed on the same line for every iteration ?
You can visualize like this :-
user1 update_attribute_button
user2 update_attribute_button.
...
and so on.
But if I use a button_to method the button is getting displayed on a newline. which I don't want.heres my code snippet:-
<% #post.bids.each do |bid| %>
<p>
<%= bid.user.email %>
<%= button_to "Offer Bid", offer_bid_post_bid_path(#post, bid), :action => "offer_bid">
</p>
<% end %>
But with the above code the 'email' and 'offer bid' are appearing in two lines, but i want to display them as pairs, with each pair appearing on one line.
I can achieve it using a 'link_to'.
If I use 'link_to' instead of 'button_to' I'm able to achieve my idea, but not able to do it with a button_to. Why is this difference between link_to and button_to.
I want to display the 'offer bid' as a button only.
Now, How to make the button_to buttin appear on the same line as the 'email'.
Please let me know if the question's description is not clear.
Thanks in advance.
A button_to generates a form and a div around the button. So, if you do not restrict the width of the container which is before the button, it will take 100% of the width pushing the button down.
<% #post.bids.each do |bid| %>
<p>
<div style="float: left; width: auto;"><%= bid.user.email %></div>
<%= button_to "Offer Bid", offer_bid_post_bid_path(#post, bid), :action => "offer_bid" %>
</p>
<% end %>
This is not to do with rails but rather how web browser's render forms.
A button_to is just a convenient way to create a form with a non-visible field. If you want the form on the same row as the email address you'll need to put it into a container, most usually a div, set the div to float left and overflow hidden.
button_to renders to a form tag, so I just altered the CSS to ensure the form tag doesn't create a new line.
But to apply it only to a specific form tag then give add form_class: "myButton" see below.
In your something.html.erb
<%= button_to "Offer Bid", offer_bid_post_bid_path(#post, bid), :action => "offer_bid", form_class: "myButton">
Put this in your application.css
myButton {
display: inline;
}