CODEWITHSUNDEEP
jqueryhtmlcss
Wizzard
Wizzard

Reputation: 12712

Align the form / delete button with the other buttons

I have a table, and at the end of the table are some options. View, Edit and Delete. I need the Delete button to be a form so I can POST the delete.

My button/form doesn't sit on the same line though, and I am not sure why, I've used the form-inline class, and tried just setting it display inline-block but nothing is working for me. Using bootstrap 3.2.

http://codepen.io/anon/pen/ojuLe

HTML

<table>
    <tr>
        <td>Something</td>
        <td>
            <a class="btn btn-default" href="/foo/1">View</a>
            <a class="btn btn-primary" href="/foo/1/edit">Edit</a>
            <form class="form-inline" method="POST" action="/foo/1">
                <button class="btn btn-danger">Delete</button>
            </form>
        </td>
    </tr>
        <tr>
        <td>Something else</td>
        <td>
            <a class="btn btn-primary" href="/foo/2/edit">Edit</a>
            <form class="form-inline" method="POST" action="/foo/2">
                <button class="btn btn-danger">Delete</button>
            </form>
        </td>
    </tr>
</table>

CSS

td {
    padding: 10px;
    border-bottom: 1px solid green;
}

Upvotes: 1

Views: 820

Answers (1)

James Donnelly
James Donnelly

Reputation: 128786

Most browsers by default set form elements to display as blocks. To change this, you simply need to set your form to display inline. As your form element already has a class of .form-inline, we can style that particular class to appear this way:

form.form-inline {
    display: inline;
}

CodePen demo.

Upvotes: 4

Related Questions