For my form below, how would I prevent the form from skipping to the next line? I have taken a look at bootstrap class "form-inline" and did not seem to work as it disabled my form.
Hello World!
<%= form_for(current_user.likes.build(blog_id: blog.id)) do |f| %>
<div><%= f.hidden_field :blog_id %></div>
<%= f.submit "Submit" %>
<% end %>
This results in:
Hello World!
<Submit Button>
Question: How do I make it come in one row so it is as follows:
Hello World!<Submit Button>
Either make both your text and form inline or, as commented by Sparda, use float: left orfloat: right.
This is a trivial css thing :)
Related
I'm trying to style a simple Ruby on rails form with the Twitter Bootstrap css but I'm struggling to workout which bits of rails code goes into which part of the Bootstrap css for a form.
For example where would the following line fit into the Bootstrap css for a form? :
<%= f.text_field :company %>
Based on the examples in the Twitter Bootstrap documentation, I am assuming you are attempting to apply the form-control class to your input. If this is the case, you would do it like this.
<%= f.text_field :company, :class => "form-control" %>
See similar question: Using CSS to style Ruby objects in erb
<%= f.text_field :company %>
Actually, this code means "Create a markup input of type text, with the good name (ex: user[company]) so Rails can handle the parameter easily". No more no less.
Example Output:
<input type="text" name="user[company]">
Bootstrap will envelope then this object with a style provided by CSS. So
1- Ensure your css is loaded into your "application.css"
Usually, you'll need to add style for the form
<%= form_for #resource, html: { class: "form form-inlined" } do |f| %>
And also around your input text field:
<div class="form-group">
<%= f.label :company %>
<%= f.text_field :company, class: "form-input" %>
</div>
This is just an example, but you can see where to put the bootstrap class on each elements.
How can I make the new_value_path actually be a submit button that creates a new value instead of just refreshing back onto itself?
My current new.html.erb:
<h1>New Value</h1>
<%= render 'form' %>
<%= link_to new_value_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
I want to keep the class: 'btn' and the span class="glyphicon glyphicon-plus" I think it has something to do with CRUD, but I haven't found an answer that specifically deals with including a class and a span.
I had to solve the answer in the _form itself using f.submit
I'm playing around with some of the input boxes for my rails project.
I'm a bit taken with the first example given here. I like the little '#' notch and could use that for a formatting prompt to our users.
Their code looks like this:
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
If i put that into my rails view it works perfectly and looks great.
But my form setup is running with a form_for function, and I'm having difficutly getting the two to play nicely.
My rails html.erb code looks like this below:
<div class="row">
<div class="col-md-6 col-md-offset-4">
<%= form_for #request do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :user_id%>
<%= f.text_field :user_id%>
<%= f.submit "Begin my request", class: "btn btn-primary" %>
<% end %>
</div>
</div>
I've tried wrapping the two pieces of code together in various ways but to no effect!
General constants is that my rails code always comes out with hard rectangular edges (compared to the bootstrap smooth curves), I cannot get the input-group-addon to sit comfortably on the end of the input field, it variously rides above and below or sits awkwardly over the larger form block etc... so fail on my part. Anyone got any insight?
In terms of gems pertinent to bootstrap I'm using:
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.0.beta1'
The problem you are running into is form_for is using the rails FormBuilder to generate your form and the method text_field is translating to a specific piece of html. You can have it create a different piece of html by creating your own form builder. If you opt to use another gem like simple_form it gets even easier as you can just create additional types of fields. You can look over the documentation for that gem for more information.
class CustomFormBuilder < ActionView::Helpers::FormBuilder
def text_field_with_addon(name, addon, *args)
#template.content_tag(:div,
#template.content_tag(:span, addon, class: 'input-group-addon') +
#template.text_field(name, *args),
class: 'input-group')
end
end
Then use it like:
<%= form_for #request, builder: CustomFormBuilder do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :user_id%>
<%= f.text_field_with_addon :user_id, '#' %>
<%= f.submit "Begin my request", class: "btn btn-primary" %>
<% end %>
I am writing a form with three text input fields. I have used text_field_tag to create them
<%= text_field_tag(:input_first) %>
<%= text_field_tag(:input_second) %>
<%= text_field_tag(:input_first) %>
Am using bootstrap css. I want to make the second input larger than the first and the third input. How can I achieve that?
I have tried the below, and even more and the input field size is not changing.
first
<%= text_field_tag(:input_second, :input_html => { :class => "input-large"}) %>
second
<%= text_field_tag(:input_second, nil, :class => "input-large") %>
third
<%= text_field_tag(:input_second, nil, :size=> 30) %>
fourth
<span class="input-large">
<%= text_field_tag(:input_second) %>
</span>
What wrong am I doing? Am a beginner in rails/css/html
ps: should I use text_field_tag or text_field ?
Bootstrap utilizes specific classes to control the width of input elements:
In a Rails template, you'd invoke a text_field_tag in the following manner:
<%= text_field_tag('input_second', nil, class: 'input-large') %>
I have been trying without much luck to get <%= f.submit %> to appear as the same as my other "buttons", all in a row. I have found this helpful post on modifying the class of f.submit, but realized upon examining its element in browser that it took on the class of input, regardless of which additional classes I added as option parameters, thus restricting its appearance.
Essentially, each of my other buttons has the following form:
<div class="sort-nav">
<ul>
<li><h4><%= link_to "Some stuff", some_link_path %></h4></li>
</ul>
</div>
And I was wondering if there is a way to fit all of these styles compacted into one class, and override that of the input class contained in f.submit. Thanks.
For edification, this button is going to be my "Follow"/Unfollow" button used to create or destroy Relationships, which I first intend to render a _follow_form partial with the following code:
<% if current_user.following?(#course) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
With each of the individual _followpartial looking like the following:
<%= form_for(current_user.relationships.build(followed_id: #course.id)) do |f| %>
<%= f.hidden_field :followed_id %>
<%= f.submit "Follow course" %>
<% end %>
a bit hackish but you can always use js to submit the form so instead of using f.submit, change it to
<div class="sort-nav">
<ul>
<li>
<h4><%= link_to_function "Some stuff", '$(this).closest("form").submit()' %></h4
</li>
</ul>
</div>