Rails link_to changed to button_to and styling using with bootstrap btl class

Question

Hi I'm trying to use "button_to" style from bootstrap in one of my view for a show action which has 3 link_to actions as shown below.

<%= link_to "Edit Article", edit_article_path(@article), class: "btn btn-default" %>  
<%= link_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
<%= link_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>

These links gets displayed as a button in one row next to each other.

But when I change call link_to to button_to as shown below, all three buttons gets displayed on separate lines new code is given below...

<%= button_to "Edit Article", edit_article_path(@article), method: :get, class:"btn btn-default" %>  
<%= button_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
<%= button_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>

So the question is How to display following changed buttons on the same line (or row)?

Partial view is as follows,

<p>
<b>Article Posting date</b>: <%= @article.updated_at %><br />
<b>Article Title</b>: <%= @article.title %><br />
<b>Article content snippet</b>: <%= @article.content %>
</p>

<% if signed_in? %>   
  <%= button_to "Edit Article", edit_article_path(@article), method: :get, class:"btn btn-default" %>  
  <%= button_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
  <%= button_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>
<% end %>

Removed 2nd part of the question from the post as requested.

Answer 1

Q1: Without knowing the css for the buttons. Try adding the display:inline to the css for your buttons.

Q2: How about adding remote: true to the button/link render line. Rails js adds ajax events to link_to and button_to elements that use this, using the http method supplied and the url on the element(which you will have to add).

So your code should look something like:

<%= button_to "Publish Article", publish_article_path(@article), id: "publish_button", class: "btn btn-primary", remote: true %>  

You can hook into the ajax events using:

$("#publish_button").on("ajax:success", function(e){
   //blah
});

All remote events here

Just a note, its not best practice to use click events for submitting ajax requests and there is no need to with rails.

Answer 2

It would be best to post the rest of your view, but this solution might work to display your buttons on the same row. You should really just ask Q1 in a another SO Question.

Reference Bootstrap's Grid documentation for best customization.

<div> <!-- adding a class="row" might be even better for your alignment -->
  <div class="col-md-6">
    <%= link_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
  </div>
  <div class="col-md-6">
    <%= link_to "Close Article", '', id: "close_button", class: "btn btn-danger" %> 
  </div>
</div>

Expriment with the 6 's. Columns should add up to 12 or less. Use col-md-offset-2 to offset by two columns so you can narrow your buttons, but fill in unused columns.

You can also use the content_tag view helper to to wrap these buttons instead of using <div> tags.

Answer 3

//whatever.css

.btn{
      float:left;
  }

After this code put a div:

 <%= button_to "Edit Article", edit_article_path(@article), method: :get, class:"btn btn-default" %> <%= button_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %> <%= button_to "Close Article", '', id: "close_button", class: "btn btn-danger" %> <div style="clear:both"> </div>