<select> created by time_select is missing class="form-control" - twitter-bootstrap-3

Styling <select> in Bootstrap 3.3.7 can be done like so:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
The key is the class form-control. When I use time_select from Phoenix.HTML.Form in my html.eex that creates a <select>, the class is not added even when I specify it:
<div class="form-group">
<%= label f, :break, "Pause", class: "control-label" %>
<%= time_select f, :break, class: "form-control" %>
</div>
The resulting HTML looks like this:
<div class="form-group">
<label class="control-label" for="training_break">Pause</label>
<select id="training_break_hour" name="training[break][hour]">
<option value="0">00</option>
...
How do I add the class form-control to the <select> here?
I've noticed that other types of inputs do add the class, e.g. text_input:
<div class="form-group">
<%= label f, :title, "Titel", class: "control-label" %>
<%= text_input f, :title, class: "form-control" %>
</div>
This results in that:
<div class="form-group">
<label class="control-label" for="training_title">Titel</label>
<input class="form-control" id="training_title" name="training[title]" type="text">
</div>
Another thing I've found is this post: Adding a bootstrap class to rails form time_select field. It states the same problem, sadly there is no such HTML-specific parameter for Phoenix' version of that function.
Maybe I'm just missing something?

When you use a function that generates just one <select> (e.g. select), you can add the class like so:
<%= select f, :age, class: "form-control" %>
When you use a function that generates more than one <select>s (e.g. date_select), to add the class you need to address each one separately like so:
<%= date_select f, :date,
[
year: [class: "form-control"],
month: [class: "form-control"],
day: [class: "form-control"]
] %>
This will add the class form-control to all three generated <select>s.

Related

Articles appear too many times

I started using Ruby on Rails a few days ago, and I have a problem with the each do loops.
Here's my AccueilController's code :
def index
#postsTest = Post.last(1)
#articles = Article.last(1)
#articlesList = Article.last(2)
respond_to do |format|
format.html # index.html.erb
format.json { render json: #users }
end
Here's my application.html.erb code :
<div id="container">
<div id="col1">
<%= render :partial => 'shared/listArticles', :collection => #articlesList %>
<div class="clear"></div>
</div>
<div id="col2">
<%= yield %>
</div>
</div>
</div>
And now my shared/listArticles's code :
<% #articlesList.each do |article| %>
<div id="blocArticle">
<div id="pic">
<%= image_tag (article.photo.url(:thumb)) %>
</div>
<div id="contentArticle">
<div id="titleArticle">
<%= link_to article.title, article %>
<div class="clear"></div>
</div>
<div id="contentArticleDesc">
<%= link_to article.desc, article %>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<% end %>
And my problem is that if I write #articlesList = Article.last(2) then the last two articles will appear two times; if I write #articlesList = Article.last(3) then the last three articles will appear three times etc...
Of course, I would like that each of them appear just one time.
Does someone have any ideas about the source of the problem ?
You're rendering a partial with a collection, therefore Rails calls the partial for each item in the collection. Remove your loop from the partial view or remove the collection param, don't do both!

helper view with haml and simple_form

I tried to insert a simple_form helper into a view helper (sorry for the pun) and using it with the Haml::Helpers, example:
def front_box_search_html(form_object)
my_custom_wrapper() do
non_haml do
simple_form_for( form_object ||= Form::Search.new, :url => front_search_path ) do |f|
haml_concat f.input :phrase
haml_concat f.button :submit
end
end
end
end
but this code is not rendered correctly: all html code appears (the various html tags wrapper, the inputs and the labels) but without the tag, As you can see this is the result (testing with RSpec, but in the browser is the same thing):
Failure/Error: helper.capture_haml{ helper.front_box_search_html }.should have_xpath("/html/body/div[#*]/form")
expected following text to match xpath /html/body/div[#*]/form:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body>
<div class= "boxSearch box">
<p class = "sum">search title</p>
<div class = "row string optional">
<label class = "string optional" for="form_search_phrase"> word</label>
<input class="string optional" id="form_search_phrase" name="form_search[phrase]" type="text">
</div>
<div class = "row buttons last">
<input class = "button" id="form_search_submit" name="commit" type="submit" value="search">
</div>
</div>
</body>
</html>
to be honest I have not fully understood how to use various methods of Haml::Helpers, about the documentation is poor.
my env: rails 3.0.7, haml 3.1.4, simple_form 1.5.2
Just a guess but the 'simple_form_for' helper also outputs html so I think it should be:
haml_concat simple_form_for( form_object ||= Form::Search.new, :url => front_search_path ) do |f|
haml_concat f.input :phrase
haml_concat f.button :submit
end

Rendering datetime_select in Rails

Current form code:
<%= form_for #booking do |f| %>
<%= render 'shared/error_messages', :object => f.object %>
<time class="field">
<%= f.label :date %>
<%= f.datetime_select :date_time, :prompt => { :hour => "Hour", :minute => "Minute" } %>
</time>
<% end %>
This renders each select item in a new row.
I couldn't post the image due to my noob StackOverflow status but I'll try to display it in interpretative text:
select year
select month
select day
...and so on with time.
Is there a simple way to render these fields in the same row ie date selectors in one row, time selectors in the next?
select year | select month | select day
Rendered html:
<time class="field">
<option value="2006">2006</option>
...edited for legibility...
<option value="2016">2016</option>
</select>
<select id="booking_date_time_2i" name="booking[date_time(2i)]">
<option value="1">January</option>
...edited for legibility...
<option value="12">December</option>
</select>
<select id="booking_date_time_3i" name="booking[date_time(3i)]">
<option value="1">1</option>
...edited for legibility...
<option value="31">31</option>
</select>
— <select id="booking_date_time_4i" name="booking[date_time(4i)]">
<option value="">Hour</option>
<option value="00">00</option>
...edited for legibility...
<option value="23">23</option>
</select>
: <select id="booking_date_time_5i" name="booking[date_time(5i)]">
<option value="">Minute</option>
<option value="00">00</option>
...edited for legibility...
<option value="59">59</option>
</select>
</time>
I wouldn't use the standard datetime_select helper, I would build a helper method with the select statements you wanted and styled the way you wanted.
Here is the link to the docs for the select view method: http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html
Just create the select statements to have the id and name values you need (ie booking_date_time_2i for month, 4i for hour etc...), and put them all in a helper so you can easily call them.

RoR no route matches

I have this code in my routes:
controller :active_car do
put 'switch_car' => :update
get 'switch_car' => :edit
end
This is my code in on my edit page.
<% form_tag('switch_car', :method => :put) do%>
<div class="field">
<label for="car_info_id">Car Name:</label>
<%= select("", "car_info_id", #available_cars.collect {|v| [v.name, v.id]})%>
</div>
<div>
<%= submit_tag "Switch Car" %>
</div>
<% end %>
When I click submit I get the following routing error.
No route matches "/switch_car" with the url pointing to http://localhost:3000/switch_car?method=put
The get is working just fine as I end the url with switch_car I get my page to edit. For some reason the put definition is not working.
After changing method to second argument it just doesn't work. It seems to have post as the method still instead of put. Here is generated HTML
<form accept-charset="UTF-8" action="switch_car" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="_method" type="hidden" value="put" />
:method belongs to the "options" hash, which is form_tag's second argument, not the first.
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-form_tag
Please inspect the html generated by that tag and post it here.

How to insert <br> after label tag in simple_form?

Using simple_form, I have a simple input like this:
<%= f.input :email %>
This generates (removed irrelevant parts):
...
<label>Email</label>
<input .... />
...
I want the input control to come below the label, so I need a <br/> after </label>:
...
<label>Email</label>
<br/>
<input .... />
...
How do I do the above?
I tried:
inserting a <br/> in config/initializers/simple_form.rb:
config.label_text = lambda { |label, required| "#{required} #{label} <br/>" }
And this generates:
...
<label>Email<br/></label> #note the location of <br/>
<input .... />
...
The <br/> is just before the </label>. Now, this works in terms of showing the input on the next "line", but it just feels "wrong".
Is there some way to do this properly?
It's usually better to do this with stylesheet rules than by inserting HTML tags, since the break is a matter of formatting rather than of content. It could be something as simple as...
label {
display: block;
}
Totally agree you should use css to do this as Steve described. But if you really want to, you can still do this by using rails' default form helper like so:
<%= f.label :email %>
<br>
<%= f.text_field :email %>