What is the best way to align two buttons on the same line if they are positioned outside of an Edit form

Struggling with my Blazor app on .NET Core 7 - I can't seem to get two buttons to display on the same line.

The first button needs to be inside an edit form for submitting and inserting data,

while the second button should be outside the edit form for clearing data controls.

How can I achieve this layout?

This is what my code looks like:

<EditForm>
 <button type="submit" class="btn btn-primary" style="width:140px">
      Create
    </button>                                        
</EditForm>
<button class="btn btn-primary align-top m-2" style="width:140px;"><i aria-hidden="true"></i> Clear</button>

Expected result: https://i.sstatic.net/hEZOl.png

javascriptcssbootstrap-5blazor-server-sideblazor-webassembly

Answer №1

arrange them side by side

<div class="inline">
  <button type="submit" class="btn btn-secondary" style="width:140px">
  <button class="btn btn-primary align-bottom p-2" style="width:140px;"><i aria- 
  hidden="false"></i> Reset</button>
</div>

Answer №2

Each button had to be surrounded by <td></td> tags, and the entire section was enclosed in a set of <table> tags as well.

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

Is it possible to connect to a Node server from outside the network if the application is only listening on 'localhost'?

When utilizing the Express framework and we implement app.listen(port), the app will be located at localhost:port/ On a local machine, it is clear how to access this address using a local browser running on the same machine. Even clients within the same n ...

javascriptnode.jsexpressherokudeployment

What is the best way to incorporate a for loop in order to create animations with anime.js?

I am currently working on implementing a for loop to create a page loader using JQuery along with the animation framework anime.js var testimonialElements = $(".loader-animation"); for(var i=0; i < Elements.length; i++){ var element = ...

javascriptjqueryanime.js

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

javascripthtmlangularjsmodel-view-controller

Determine the amount of unused vertical space within a block of text

Having applied CSS to a span element: font-height = 120px; height = 120px; line-height = 120px; The text inside the span does not completely fill the height of 120px. Is there a method to determine the offset of the text from the top and bottom boundar ...

javascriptjquerycss

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

htmlcssxhtmlpdf-generationcss-paged-media

"Every time `window.location.href` is used, it simply reloads the current

This situation might seem a bit perplexing, but I'll do my best to provide a clear explanation. Currently, I have 4 select menus stacked directly on top of each other using absolute positioning. At any given time, three of these menus are hidden (usin ...

javascripthtmlformsonsubmitlocation-href

How can I implement a CSS property on a child class when the parent class is toggled on and off?

Looking to style a child div within a parent div that toggles classes based on a flag. The parent div can have either the .pricing-section or .new-pricing-section class. Here's the structure of the parent div: const togglePriceSection = isPricingDetai ...

javascriptcssreactjs

When using nodejs with sqlite3, the first callback parameter returns the class instance. How can this be resolved in order to prevent any issues?

Exploring a TypeScript class: class Log { public id: number; public text: string; construct(text: string){ this.text = text; } save(){ db.run( `insert into logs(text) values (?) `, this.text, ...

javascriptnode.jstypescriptsqliteelectron

Reactjs encountering issues with function of Cookies section

Currently, I am working on a login module in Reactjs using Nextjs. Upon successful login, I am storing the user email in a cookie. The functionality is working as expected, but I want to restrict access to the login page for users who are already logged in ...

javascriptreactjsnext.js

The value returned by a mocked Jest function is ignored, while the implemented function is not invoked

Having an issue with mocking the getToken function within my fetchData method in handler.ts while working with ts-jest. I specifically want to mock the response from getToken to avoid making the axios request when testing the fetchData method. However, des ...

javascripttypescriptunit-testingjestjsts-jest

Having trouble retrieving alert message after submitting form using jquery

Trying to submit a form using jQuery, but when clicking on the submit button it displays a blank page. I understand that a blank page typically means the form has been submitted, but I want to show an alert() for testing purposes instead. However, it only ...

javascriptjqueryhtmlforms

Trouble with using .className for form validation

The .className is not applying the formValidation class on getWeight.length < 1 and getHeight.length < 1. I am stuck trying to figure out why this is happening after reviewing the code extensively. Any thoughts on what could be causing this issue? Y ...

javascripthtmlcss

Issue with symbol not rendering correctly in Email Body when setting width to '100%' in Postman

I'm currently working on sending emails using APIS in NodeJS. The issue I am facing is related to the CSS code with '%' symbols triggering errors when attempting to send the email via Postman, resulting in a 500 error. However, removing the ...

htmlcssnode.jspostmanemail-client

Dynamically apply CSS styles with knockout.js bindings based on conditions

I am looking to apply a conditional css class and a dynamic css class using the css binding feature. For example: data-bind="css: {$data.something() : true, open : showOpen() }" ...

javascriptknockout.jsknockout-2.0

Completing a React form using the Google Chrome developer console

Recently, I have been attempting to create a bot that can automatically fill out forms on a website by running a script in the Chrome console. (I want to clarify that this is entirely legal.) However, I've encountered an issue due to the fact that the ...

javascriptreactjsgoogle-chromegoogle-chrome-devtools

Can loading HTML and js through ajax be considered secure?

I am currently utilizing the Jquery load function $('#result').load('test.php'); in order to dynamically load a page within another page when clicking on a tab. The page being loaded contains javascript, php, and a form. Upon inspecting ...

javascriptajax

The CSS attribute for determining the height of elements and a list that

My goal is to create a nested set of list items in a Joomla menu where the outermost parents adjust their position to make room for the children. The height of each list item needs to be fixed because they will serve as buttons in the menu. Currently, when ...

htmlcss

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Is there a way to detect when the CSS property "display" of an image is changed by another JavaScript script or function and then execute some JS code? I tried using $(this).bind('propertychange', function(){}) but it doesn't work, and setIn ...

javascriptjquerycsscallback

What is the function of computeCentroids in Three.js?

While working on my custom geometry in three.js with TypeScript, I encountered an issue where the object appeared dark with Lambert material. To troubleshoot, I examined the source code and noticed that nearly every geometry class had the following two lin ...

javascriptthree.js

Unable to retrieve data from MySQL Database using Express Route

Struggling to understand how to execute a MySQL database query within the promise in my route file. Currently, I am developing a RESTful API for interacting with a MySQL database using GET methods. The technologies being utilized are Express for the backen ...

javascriptmysqlapiexpressaxios