Position the form / delete button in alignment with the rest of the buttons

I have a table with options at the end like View, Edit, and Delete. I need the Delete button to be inside a form so that I can POST the delete request.

However, my button/form is not aligning on the same line as expected. I have tried using the form-inline class and setting display inline-block, but nothing seems to work for me. I am 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;
}

Answer №1

By default, most browsers will display form elements as blocks. However, you can easily change this by setting the form to display as inline. If your form element already has a class of .form-inline, you can style that specific class to achieve this effect:

form.form-inline {
    display: inline;
}

Check out this CodePen demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on incorporating search functionality and sorting options into DataTables

After setting up mySQL database and connecting it with PHP, I displayed the data on a webpage using AdminLTE and DataTables.net. Check out this tutorial that guided me through the process: The challenge I'm facing now is integrating the search box fu ...

What is the best way to customize CSS in Material UI?

When working with material UI and reactjs, I encountered an issue while trying to override the button color without affecting the tab colors (see screenshot). How can I achieve this using themes in material UI? Code: const theme = createMuiTheme({ p ...

I am curious about this "normalize.less" that appears in the F12 Developer Console

Trying to track down information on this mysterious "normalize.less" that is appearing in the Chrome 76 developer console has proven to be a challenge for me. In Firefox 69's console, it displays bootstrap.min.css instead, leading me to believe that i ...

Some PDF files appear as blank when shown using a Base64 encoded string

I am attempting to display a PDF file on a web page using its base64 encoding. Below is the ReactJS code I am using: <object style={{ width: '100%', height:'842pt' }} type="application/pdf" data={`data:application/pdf;base ...

What is the solution for positioning an input or select element at the end of a tr element?

Within a table, I have a form where each <td> tag contains either a <select> or an <input>. However, due to the varying lengths of the labels within the <td> tags, the <input> or <select> fields are not aligned in the sa ...

What is the best way to divide my value sets using jQuery?

Within a given string such as 28_34/42/34,23_21/67/12,63_5/6/56, I am seeking to split or eliminate sets based on the ID provided. For example, if the ID is 23, then the set 23_21/67/12 should be removed. To achieve this, I am checking the value after the ...

The extent of utilizing the click handler in ECMA script 6

In ES6 arrow functions, the scope of this becomes available. However, there are instances where I cannot access this in an arrow function while it works with a normal anonymous function. For example: Sample 1 $(document).ready(function() { $(' ...

Tips for creating a new tab or window for a text document

Below code demonstrates how to open a new tab and display an image with a .jpg extension. Similarly, I want to be able to open a text document (converted from base64 string) in a new tab if the extension is .txt. success: function(data) { var ...

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

What's the issue with the jQuery each() function when selecting options?

Below is the function in question: function setDropdownValue(dropdownId,selectedValue){ $('#'+dropdownId+' option').each(function(){ if ($(this).val().toLowerCase()==selectedValue.toLowerCase()){ ...

Divs are stubbornly resisting the urge to behave like block elements

.useless { float: right; clear: right; border: 1px dashed blue; height: 50px; width: 100%; } div.pretraga { border: 3px groove red; width: 20%; float: right; margin-right: 5%; border-top: 0; display: flex; justify-content: center; height: 250px; <div cl ...

Prevent users from changing dropdown options after a form submission fails using Javascript and Jquery

Currently, I am pursuing the tech degree at Team Treehouse and my third project involves creating an interactive form. To simplify my issue, I will outline it in bullet points: The credit card payment method should be preselected when the page loads. I n ...

Enable strict mode for older web browsers

I would like to incorporate the "use strict"; statement into my function, but unfortunately it is not compatible with older browsers such as ie7 and ie8. Is there a workaround to ensure this functionality works in legacy browsers? Could someone please cla ...

What steps should I follow to generate a table using Ajax and Javascript when a button is clicked?

After spending hours following various tutorials and exploring previously asked questions, I am struggling to make this work. My HTML page looks like this: <!DOCTYPE html> <html> <head> <link type="text/css" rel="styleshee ...

How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...

Parallax scrolling within a div creates a dynamic visual effect

Hello there, thank you for taking the time to read this. I am currently working on a website and encountering some challenges while trying to implement a specific effect. I am aiming to achieve a parallax effect similar to what can be seen on this page. As ...

Exploring jQuery.each: A guide to navigating JSON objects

As a beginner in working with JSON, I am struggling to iterate over a JSON response received via AJAX. My objective is to extract and loop through checkbox values retrieved from a database table such as 2,3,7,9,3. However, I am currently facing difficultie ...

Failure to execute Ajax request when searching for a query

My personal GitHub profile viewer React application allows you to search for a profile by username. By default, my own GitHub username is provided on the landing page. However, when trying to search for another user, my ajax call is not functioning properl ...

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

What could be causing my footer to be stuck in the center of my webpage?

Despite trying various methods, my footer remains stuck in the middle of the page. I even attempted to set the body height to 100% or 100vh without success. footer placement issue (https://i.stack.imgur.com/qzp2i.png) css: body { display: flex; flex-direct ...