I'm building a Rails app. How can I build a search bar that contains the search button inside it? An example would be the Stackoverflow search bar at the top of the page. Here's my search bar so far:
<div id= "searchbar">
<%= form_tag things_path, :method => :get do %>
<p>
<%= text_field_tag :search, params[:search] %>
<button class="btn" type="submit"><i class="thing-search">Go</i></button>
<%#<div="Go"><%= submit_tag "Go", :name => nil </div> %>
</p>
<% end %>
</div>
You might want to take a loot at Bootstrap Button Groups. They're essentially exactly what you're looking for and rolling bootstrap into a rails app is fairly simple. At the very least it will give you a good design to work off of.
Related
I have the following in my html.erb file:
<%= image_tag "logo.jpg", :class => "img-responsive", :href =>"http://www.google.com" %>
However, this is not a clickable link. I assumed the :href = > would make it so. Does anyone have any ideas of making your rails image a clickable link? I tried the following logic which I found on another Stack Overflow Post:
<%= link_to image_tag("logo.jpg", :class => "img-responsive"), "http://wwww.google.com" %>
But this makes the image smaller and adds an odd half circle at the bottom of the image. I also cannot add :style or :class working properly.
Anyone have any ideas?
Not sure if this is the best way, but you could just wrap the image tag with regular anchor tags:
<a href="http://www.google.com">
<%= image_tag "logo.jpg", :class => "img-responsive" %>
</a>
The second way is technically the right way to do it, however since its giving you issues could always try this:
<%= link_to 'http://google.com' do %>
<%= image_tag 'logo.jpg', class: 'img-responsive' %>
<% end %>
As for the class/style not adding properly I've always done it as
class: 'this-is-a-class'
and
style: 'padding-left:30px;'
I have a new.html.erb and a _form.html.erb
How do you align a button and a link if the back link is in the new.html.erb file while, a submit button would be in the _form.html.erb?
new.html.erb
<%= render 'form' %>
<%= link_to 'Back', project_path %>
_form.html.erb
<%= simple_form_for(#trip) do |f| %>
<%= f.input :project_name, class: 'form-control' %>
<div class="top-buffer">
<%= f.button :submit, class: "btn btn-primary pull-right" %>
</div>
<% end %>
Is there a rails way to align the back and the button together? What would be the conventional way?
Should I just simply put the back button in the _form.html.erb? Will this affect anything in the long run?
_form.html.erb is what is called a partial. Partials allow you to remove unnecessary duplication of code. They help breaking the rendering process into more manageable chunks without changing functionality.
To answer all of your questions, ask yourself why you are using a partial. If this is to remove duplication then go ahead and move the back button inside _form.html.erb.
Now, if you could provide some css we could actually help you to center those buttons.
UPDATE
I have just realised you are using bootstrap. In this case try updating your link to this...
<%= link_to 'Back', project_path, class: "btn btn-primary pull-left" %>
and see if it solves your problem.
This is what I got ...
... and it seems more or less aligned to me.
very straight forward..
how do I add a class to something like this
<h2><%= guide.title %></h2>
which is just displaying text?
You have to wrap it within some container:
<div class="my_class"><%= guide.title %></div>
The container you'll use depends on the context given text is to be used.
Update:
Since the text is already wrapped in <h2> you can do:
<h2 class='my_class'><%= guide.title %></h2>
Another update:
If you wan to minimize the amount of pure html in your view, you can always do:
<%= content_tag :h2, class: 'my_class' do %>
<%= guide.title %>
<% end %>
I have a simple eRubis (*.html.erb) document, and want to "copy" various elements throughout a page. Whenever I use simple Ruby statements like this:
<%= 3.times do %> ... <% end %> with multiple "times" statements within that to copy more elements returns either errors or horribly rendered elements. What is the best way to "copy" multiple elements throughout a eRubis page using Ruby statements?
One approach I use in RoR is content_for and yield. I store my element(s) in a content_for and then I litter yields around wherever I want that element:
<% content_for :some_elements do %>
<divs or whatever />
<and maybe some things too />
<%= even some more erb %>
<% end %>
<%= yield :some_elements %>
<%= yield :some_elements %>
<%= yield :some_elements %>
Those yields can go anywhere, you could even have the content_for in your layout file and put those yields in any view or partial as many times as you want.
If you want to simply mock up a list or something, times works perfectly well if you use it correctly:
<ul>
<% 10.times do |i| %>
<li id="item_#{i}">
content in item <%= i %>
</li>
<% end %>
</ul>
But of course the times approach requires that all the elements be in the same spot. That's the advantage of the content_for/yield way, you can place the yields where ever you want. You can even put a yield inside a times:
<% 10.times do |i| %>
<%= yield :some_elements %>
<% end %>
But that's just crazy. Anyway, have fun.
I want to take from the user an image URL and on submit display a thumbnail of that image in the same page
Here is how i take the URL from the user
<%= form_for([#project, #project.uploads.build]) do |f| %>
<div class="field">
<%= f.label :url %><br />
<%= f.text_field :url %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
then i display the URL in the same page
<p>
<%= upload.url %> |
<%= link_to 'Delete', [upload.project, upload],
:confirm => 'Are you sure?',
:method => :delete %>
</p>
But instead i want to display a thumbnail..How can I do that?
image_tag is the Rails method you're looking for. (http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag). Just use the uploaded URL as the source. Then, use either the :size option, or set a class on your image tag and handle resizing it through CSS.
That method will of course not resize the actual image, and the user's browser will pull-down the larger file and then resize it in the browser. It consumes the same amount of bandwidth as the full-size version, because it is the full-size version.
To do post-processing on the image and actually resize it (a real thumbnail), I recommend the CarrierWave Gem (https://github.com/jnicklas/carrierwave). It's documentation is pretty good, so I won't dive into how to use it here.