Misalignment of input and label elements due to varying widths

Question

Misalignment of input and label elements due to varying widths

Why are the input elements not aligning with the button and other elements?

Upon inspection in Layout (Firefox Developer Edition), it appears that the sizes of the input and label elements are different even though they are within the same div.

https://i.sstatic.net/mj0ax.png

What is causing this discrepancy? And how can we align them elegantly without resorting to trial and error, such as adjusting margins?

Highlighted section from NewTransaction.js file: https://i.sstatic.net/5kDtu.png

CSS file for NewTransaction: https://i.sstatic.net/feLwx.png

SOURCE CODE: https://github.com/yanichik/react-course/tree/main/full-course/expense-tracker-v2

html css reactjs

Answer 1

Answer №1

Due to the padding of 2px on both sides of the input element, combined with the default box-sizing setting of content-box in the user agent stylesheet.

The content-box option provides the standard CSS box-sizing behavior. When a width of 100 pixels is set for an element, the actual content box will be 100 pixels wide, with any additional border or padding increasing the final rendered width beyond 100px.

To address this issue, it is recommended to use box-sizing: border-box.

For further information, please see: https://www.w3schools.com/css/css3_box-sizing.asp

Your revised code can be viewed here: https://codesandbox.io/embed/expense-tracker-yan-forked-80tfk?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Due to the padding of 2px on both sides of the input element, combined with the default box-sizing setting of content-box in the user agent stylesheet.

The content-box option provides the standard CSS box-sizing behavior. When a width of 100 pixels is set for an element, the actual content box will be 100 pixels wide, with any additional border or padding increasing the final rendered width beyond 100px.

To address this issue, it is recommended to use box-sizing: border-box.

For further information, please see: https://www.w3schools.com/css/css3_box-sizing.asp

Your revised code can be viewed here: https://codesandbox.io/embed/expense-tracker-yan-forked-80tfk?fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

It is important to standardize the styles,

The style in your code that caused an issue was box-sizing. I simply set all elements to border-box, but you can also just add box-sizing: border-box; to the input and it will work as well.

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.form {
  margin-top: 15px;
}

input {
  display: flex;
  width: 100%;
}

label {
  display: flex;
  justify-content: flex-start;
}

button {
  display: block;
  width: 100%;
  margin-top: 5px;
  background-color: purple;
  border-color: purple;
  color: white;
  font-weight: bold;
}

.amount,
.description {
  /* display: flex; */
  flex-direction: column;
  margin-bottom: 5px;
  margin-top: 5px;
}

<div className="form">
  <form onSubmit={submitHandler}>
    <div class='description'>
      <label htmlFor="description" pointing="true">
                        Description
                    </label>
      <input type="text" id='description' placeholder="Type Something" ref={descrRef}/>
    </div>
    <div class='amount'>
      <label htmlFor="amount" pointing="true">
                        Amount
                    </label>
      <input type="number" id='amount' step="0.01" placeholder="$" ref={amountRef} />
    </div>
    <div>
      <button type="submit">Add Transaction</button>
    </div>
  </form>
</div>

Answer 4

It is important to standardize the styles,

The style in your code that caused an issue was box-sizing. I simply set all elements to border-box, but you can also just add box-sizing: border-box; to the input and it will work as well.

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.form {
  margin-top: 15px;
}

input {
  display: flex;
  width: 100%;
}

label {
  display: flex;
  justify-content: flex-start;
}

button {
  display: block;
  width: 100%;
  margin-top: 5px;
  background-color: purple;
  border-color: purple;
  color: white;
  font-weight: bold;
}

.amount,
.description {
  /* display: flex; */
  flex-direction: column;
  margin-bottom: 5px;
  margin-top: 5px;
}

<div className="form">
  <form onSubmit={submitHandler}>
    <div class='description'>
      <label htmlFor="description" pointing="true">
                        Description
                    </label>
      <input type="text" id='description' placeholder="Type Something" ref={descrRef}/>
    </div>
    <div class='amount'>
      <label htmlFor="amount" pointing="true">
                        Amount
                    </label>
      <input type="number" id='amount' step="0.01" placeholder="$" ref={amountRef} />
    </div>
    <div>
      <button type="submit">Add Transaction</button>
    </div>
  </form>
</div>

Misalignment of input and label elements due to varying widths

Answer №1

Answer №2

Similar questions

How can I access the variable name in an array of objects in React components?

Unable to prevent ordered lists from overlapping with other content I attempt to place beneath them in HTML

Providing data from a javascript xml file upon page initialization

Just delving into Django and having some trouble with loading CSS files despite following tutorials

How come the dropdown menu consistently disrupts my CSS design?

Guide to dynamically loading data from a database using PHP, jQuery, and AJAX as the user scrolls down the page

Guide to converting TypeScript classes into functional components in ReactJS

How can I create space between a checkbox and its label in Google Web Toolkit (GWT)?

Encountered an issue with location.state during the execution of gatsby

An error occurs when trying to access the Constants property in the RNCSafeAreaViewConfig object because it is undefined

displaying a div upon checking the checkbox

Background image color not displaying correctly

How can I add a JSON object to another JSON object in a React application?

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

Is it possible to modify the class within TypeScript code while utilizing the CSS library for styling?

What is the proper way to select multiple elements in jQuery based on semantics?

Reset hover effect upon exiting the current website

Inquire about the width of the SVG text element

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."