Tips for ensuring uniform height across all input fields

I have created a contact form using HTML and CSS. Each input field has a small tag below to display errors, causing the adjacent field to shift downward if an error occurs.

To view the live form, click here

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.form-fields {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1rem;
}

.form-fields .input {
  font-size: 0.875rem;
  background: #f2f3f5;
  border-color: #f2f3f5;
}

.form-fields .name-field {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.form-fields .email-field {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.form-fields .subject-field {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.form-fields .phone-field {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.form-fields .message-field {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
}

.form-fields .message-field .input {
  height: 120px;
}
<div class="form-fields">
  <div class="form-group name-field">
    <input type="text" name="name" placeholder="Your Name" id="name" class="input form-control" />
    <small class="text-danger">some error for this input</small>
  </div>
  <div class="form-group email-field">
    <input type="text" name="email" placeholder="Email Address" id="email" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group subject-field">
    <input type="text" name="subject" placeholder="Subject" id="subject" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group phone-field">
    <input type="text" name="phone" placeholder="Phone" id="phone" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group message-field">
    <textarea name="message" placeholder="Message" id="message" class="input form-control"></textarea>
    <small class="text-danger"></small>
  </div>
</div>

Is there a way to resolve this issue?

htmlcss

Answer №1

Replace align-items: center; with another CSS property

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.form-fields {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
         
  grid-gap: 1rem;
}

.form-fields .input {
    display: block;
    width: 100%;
    padding: 0.75rem 0.75rem;
    font-family: inherit;
    margin: 0;
    font-size: 0.85rem;
    background-color: lightgrey;
    border: 1px solid #f7f7f7;
    border-radius: 0.25rem;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
.text-danger {
    color: #f64e60;
}
.form-fields .name-field {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.form-fields .email-field {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.form-fields .subject-field {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.form-fields .phone-field {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.form-fields .message-field {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
}

.form-fields .message-field .input {
  height: 120px;
}
<div class="form-fields">
  <div class="form-group name-field">
    <input type="text" name="name" placeholder="Your Name" id="name" class="input form-control" />
    <small class="text-danger">some error for this input</small>
  </div>
  <div class="form-group email-field">
    <input type="text" name="email" placeholder="Email Address" id="email" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group subject-field">
    <input type="text" name="subject" placeholder="Subject" id="subject" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group phone-field">
    <input type="text" name="phone" placeholder="Phone" id="phone" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group message-field">
    <textarea name="message" placeholder="Message" id="message" class="input form-control"></textarea>
    <small class="text-danger"></small>
  </div>
</div>

Answer №2

By utilizing the small tag, you are specifying a height of 1.83em. With this information, we can calculate the total height of the inputs, combine them, and then apply that as the height for the .form-group class.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.form-fields {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1rem;
}

.form-fields .input {
  font-size: 0.875rem;
  background: #f2f3f5;
  border-color: #f2f3f5;
}

.form-fields .name-field {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: name;
}

.form-fields .email-field {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: email;
}

.form-fields .subject-field {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: subject;
}

.form-fields .phone-field {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: phone;
}

.form-fields .message-field {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: message;

}

.form-fields .message-field .input {
  height: 120px;
}
.form-group {
   height: calc(0.875rem + 1.83em);
}
<div class="form-fields">
  <div class="form-group name-field">
    <input type="text" name="name" placeholder="Your Name" id="name" class="input form-control" />
    <small class="text-danger">some error for this input</small>
  </div>
  <div class="form-group email-field">
    <input type="text" name="email" placeholder="Email Address" id="email" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group subject-field">
    <input type="text" name="subject" placeholder="Subject" id="subject" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group phone-field">
    <input type="text" name="phone" placeholder="Phone" id="phone" class="input form-control" />
    <small class="text-danger"></small>
  </div>
  <div class="form-group message-field">
    <textarea name="message" placeholder="Message" id="message" class="input form-control"></textarea>
    <small class="text-danger"></small>
  </div>
</div>

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

Maintaining alignment of background elements and div images

I'm struggling to align images properly across different devices. It's more challenging than I anticipated. Currently, on mobile in portrait mode, the image is not displaying as I want it to. Ideally, I want it to be closer to how it looks in la ...

javascripthtmlcss

Ways to attach jQuery live to the entire window?

tag: I want to trigger specific functions whenever the mouse moves, regardless of its position on the browser window. Currently, I am using the following code snippet: $('html').on('mousemove', function(e) { ... } However, this appr ...

javascriptjqueryhtml

Is there a way to ensure a Bootstrap grid column takes up the entire remaining row space?

I have a dynamic set of elements that need to be inserted into a page, with some elements being labeled as "small" and others as "big". The challenge is that I do not know in advance the quantity or order of these elements. If an element is labeled "small ...

htmlcsstwitter-bootstrapbootstrap-5

"Converting jQuery Form into a Wizard feature with the ability to hide specific steps

I'm working on a form where I need to hide a fieldset when a specific event is triggered. Inside the first fieldset, there is a select tag and when a certain option is selected, the second fieldset should be hidden. <form id="form1"> <fi ...

javascriptjqueryhtml

Change the class of a button in React by toggling state without causing the component to re-render

I'm facing an issue with changing the class of a button in react js when clicked using hooks. The problem arises when the class toggles due to a state change, as the initial class is rendered instead of the toggled one. Any assistance would be greatly ...

javascripthtmlreactjs

What is the method for creating a clickable link using only HTML5 and CSS3 on a div?

Throughout the ages, this question has persisted, with answers that have stood the test of time. I've explored various solutions, yet none have met my expectations. I aim to create a fully clickable link for div .content1 without relying on text or ...

htmlcssclickable

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

javascripthtmlcss

CSS 3 blur filter without the use of transition timing

After discovering a unique method for achieving cross-browser blurring effects, I noticed that the transition wasn't quite working as expected. To solve this issue, I decided to make some adjustments by increasing the transition time and blur amount. ...

cssblurcss-filters

Is there a way to merge two :not() selectors together?

Attempting to achieve the following: :not(h1) > a, :not(figure) > a { background: #859900; } Encountering an issue as figure>a is matching with :not(h1)>a, and h1>a is matching with :not(figure)>a. How can I merge these selectors? ...

csscss-selectors

IE7 and IE6 Not Registering Required Field Indicator

Utilizing CakePHP's field validation and the typical CSS-based 'required field' indicator (red asterisk) functions smoothly across most browsers, with the exception of IE7 and IE6. It appears that these older versions of Internet Explorer a ...

cssinternet-explorercakephpinternet-explorer-7internet-explorer-6

Top method to gather all necessary inputs

I am dealing with a form that contains several required fields. You can find an example here <div class="form-group"> <label class="col-md-3 control-label" for="mpassword">Password<span class="required">* </span>< ...

javascriptjqueryhtmlcssvalidation

Issues with CodeIgniter Form Validation Implementation

Having trouble with form validation in CodeIgniter, not sure what's causing the issue! Below is my controller class: class registerController extends MY_Controller { // --- Methods ----------------- function __construct() { par ...

phphtmlvalidationcodeigniterwebforms

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

How can I create a detailed highchart map of Korea that accurately includes Dokdo in its design?

I am currently working on a project to create a comprehensive map of Korea using highchart. One major challenge I have encountered is the absence of Dokdo on the standard map of Korea provided by highchart. Is there a way for me to develop a map that inc ...

javascripthtmlcsschartshighcharts

Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...

cssselectiongradient

Getting rid of breakpoints in Bootstrap 3

I recently inherited a web application that utilizes Bootstrap 3 as its framework with some basic customization applied through the recommended _custom-variables.scss method. The official SASS port is included as a dependency and imported into the app.scss ...

csstwitter-bootstraptwitter-bootstrap-3sass

Is it possible to apply identical css styles to multiple ids at once?

Is there a way to accomplish this? .apple, .orange, .kiwi h1 {color: #892828;} I'm having trouble making it work. Any suggestions? ...

css

Creating a responsive design for a cropped image using CSS

Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the ...

htmlcssresponsive-imagesbackground-size

When hovering over the submenu, it disappears

I am currently experiencing an issue with my submenu disappearing when I move the mouse out of the a-element. As a new student in web development, I have spent hours searching on Google for solutions but haven't been able to resolve it. One solution ...

htmlcsshoversubmenu

Is there a way to generate a table without duplicating the header section?

I have been developing a page that displays member information in a table if they meet specific criteria. However, I am facing an issue where the table header keeps repeating itself for each member who meets the criteria. Below is the code snippet: <d ...

pythonhtmldjangologic