What is the best way to align two buttons horizontally together?

I've created an HTML form using JavaScript, but I'm facing an issue where the cancel and submit buttons are displayed on separate lines. How can I align them horizontally?

Here is the code snippet I'm currently working with:

var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";

The current layout looks messy. Can anyone suggest a cleaner approach for achieving this?

Appreciate your help!

javascripthtmlcss

Answer №1

Click here for the code snippet

From my observation, it seems that the elements are on the same line :P

To make the code cleaner, I usually break it into new lines and append +'s at the end of each line.

For example:

var new_comment_form = 
"<form id='add_comment' method='post'>"+
  "<textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>"+
      problem_comment_text +
  "</textarea>"+
  "<input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' />"+
  "<input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' />"+
  "<input type='submit' class='button' value='Edit Message' />"+
  "<input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' />"+
"</form>";

If you're still facing alignment issues, consider adjusting floats as shown in this link

That's all for now, before someone calls me out for using clear:both...

Answer №2

To tackle this issue, there are two methods that can be employed: 1) Utilize a table with dual columns; one housing the first button and the other housing the second button. 2) Alternatively, you may apply a margin-top style set to a negative value.

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

Error: The nested arrow function in React is not defined

Oops, here we go again. I'm attempting to craft an arrow function that will present some data, while also trying to nest a SECOND arrow function within the first in order to organize some of the information into a list - but it seems like I've h ...

javascriptreactjsarrow-functions

Opacity of Shadows in Three JS

Hello everyone, I have successfully loaded a custom model into my canvas but I am facing an issue with making the shadow transparent on the model itself. I am unsure how to achieve this as I would like the models to both cast and receive a shadow. Can anyo ...

javascriptcanvas3dthree.jsshadow

jQuery is great at adding a class, but struggles to remove it

When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...

javascriptjqueryhtmlcss

Tips for maintaining state URL persistence after a page refresh in Next.js 13 when utilizing next-usequerystate

Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page. The initial URL looks like this: localhost:3000/?page=1&genres=tree But upon refres ...

javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing

I am looking to connect the contents of a subfolder page with a page located in the main folder

I need to redirect the login page located in the subfolder signup to the index page within the main folder called web. The web folder contains both the index page and the signup folder, while the login page resides in the signup folder. What steps should ...

javascriptphphtml

Error message in PHP involving the require_once function

I'm currently using CODA and MAMP while working locally from my HTdocs folder. I've been delving into PHP and MVC structure, but encountering an issue with require_once. Despite trying various solutions found in other posts, none seem to work for ...

phphtmlcoda

Struggling to grasp the concept of using z-index in CSS

As a programmer versed in Python, C, Java, and Delphi, I am not a web developer or designer by trade. However, when required to fill those roles, I do my best; please be patient with me. :-) I have created a map (with a background image as a div), where I ...

jqueryhtmlcssz-index

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

javascriptjqueryhtml

Using pure JavaScript, implement a transition effect that changes an element's display from

My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and ...

javascriptcsscss-transitionstransform

No validation errors are currently being displayed. I am attempting to retrieve the error message when validation fails

My form validation error has suddenly stopped working. It was functioning properly yesterday, so I must have made a mistake somewhere, but I can't seem to pinpoint it. Now, when I attempt to sign up without entering any information, it just redirects ...

phphtmlcodeigniter

Changing an object into an array for saving and transforming it back to an array for usage in JavaScript

I am dealing with a unique situation where I have an object created from dynamic checkboxes in Angular. The structure of the object looks like this: {"United States":true,"Canada":true,"Australia":false} While this format works well for storing values, I ...

javascriptarraysangularjsobjectmongoose

What is the best approach to alter a user's message depending on the form's ID that was used for submission?

I currently have two separate screens that each serve a specific purpose, where only one can be open at any given time. First is the login form: <form action="/Account/Login" id="login-form" class="form" method="post"> <butto ...

javascript

What is the process for determining the overall cost of a column in Angular 9?

I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...

javascripthtmljqueryangular

The response received from the server was a 404 status () indicating that the resource failed to load

I'm encountering an issue while loading from the web service, and receiving the following error: Failed to load resource: the server responded with a status of 404 () Your help would be greatly appreciated. You can also access the code on JSFiddl ...

javascriptjqueryajaxamazon-web-services

Guide on incorporating a Bootstrap date time picker in an MVC view

Is there a live example available that demonstrates how to implement the latest Bootstrap date time picker in an MVC view? In my project, I have already included: - jQuery. - Bootstrap JS. - Bootstrap CSS. ...

javascripthtmljquerybootstrap-4datetimepicker

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

javascriptcssreactjsrxjsstyled-components

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

jquerycssmenu

The output in Javascript featured the term undefined

var counter = 0; var message = 'Join us for our Christmas Family Service on Sunday, December 19th at 11:45 am. Explore the true essence of Christmas at Bethany Evangelical Church.'; /* The text */ var speed = 50; /* The speed/duration of ...

javascripthtmloutputundefined

Angular automatically scrolls to the top of the page when clicking on any part of the bottom

I am encountering an issue on a page where I have implemented NgFor. Whenever I click anywhere at the bottom of the page, it automatically jumps to the top. Additionally, when I try to click on a button at the bottom, the button's action does not exec ...

htmlangular

Updating an array of data in D3

Seeking guidance on implementing the general update pattern in D3... My goal is to create a basic bar chart displaying data from an array, with an input form to add new data and dynamically update the chart. Struggling with repetition while trying to ref ...

javascriptarraysd3.js