Achieving perfect alignment in a CSS grid for form elements vertically

One of my current projects involves creating a form layout using HTML and CSS that follows a Material Design style:

<div class="form-group">
  <input
    type="text"
    id="feedName"
    name="name"
    value={nameValue}
    onChange={this.handleInputChange}
   />
   <label class="control-label" htmlFor="feedName">Name</label>
   <i class="bar"></i>
</div>

The corresponding CSS for this layout looks like this:

.form-group {
  position:relative;
}

.form-group input,
.form-group select {
  width: 100%;
}

.form-group input {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  transition: all 0.28s ease;
  box-shadow: none;
  height: 1.9rem;
}

<!-- More CSS code here -->

In order to center this form within a CSS Grid as a grid item, I tried utilizing flexbox alignment properties but encountered some issues with the form group.

Despite trying different strategies such as changing positioning and margins, the desired centering effect was not achieved as expected.

Additional complexities arose when the state of a select element impacted the location of an input field within the grid, leading to further confusion about how grid items interact with each other in the layout.

htmlcsscenteringcss-grid

Answer №1

Here are the recommended code modifications:

(Avoid using absolute positioning in your code.)

.main > div {
  display: flex;
  flex-direction: column;
  justify-content: center;     /* ensure vertical alignment */
}

.form-group .control-label {
  order: -1;                  /* specify label position within the stack */
}


:root {
  --secondaryGreen: rgba(114, 191, 68, 1);
  --gutter: 15px;
}

.main {
  margin-top: 50px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05), 0 2px 3px 0 rgba(0, 0, 0, 0.10);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 60px 50px 80px 80px 80px;
}

.main > div {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* text-align: center; <-- horizontal centering, if needed */
  border: 1px dashed red !important; /* for demonstration purposes only */
}

.main > div + div {
  margin-top: 10px; /* for demonstration purposes only */
} 

.title {
  font-weight: 600;
  color: var(--primaryBlue);
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}

.form-group input {
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  transition: all 0.28s ease;
  box-shadow: none;
  height: 1.9rem;
}

.form-group .control-label {
  order: -1;
  pointer-events: none;
  padding-left: var(--gutter);
  font-weight: normal;
  transition: all 0.28s ease;
}

.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}

.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: var(--secondaryGreen);
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}

.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -1rem;
  left: 0;
}

.form-group select ~ .control-label {
  top: -1.5rem;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}

.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: var(--secondaryGreen);
}

.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}
<div class="main">
  <div class="title">Title</div>
  <div>Details</div>
  <div class="form-group">
    <input type="text" id="feedName" name="name" value="" onChange={this.handleInputChange} />
    <label class="control-label" htmlFor="feedName">Name</label>
    <i class="bar"></i>
  </div>
  <div class="form-group">
    <select id="feedKind" name="feedKind" onChange={this.handleInputChange}>
      <option value="option 1">
        Option 1
      </option>
      <option value="option 2">
        Option 2
      </option>
    </select>
    <label class="control-label" htmlFor="feedKind">Type</label>
    <i class="bar"></i>
  </div>

Visit this jsFiddle demo to see the changes.

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

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

javascriptjquerycssgoogle-maps

Is the attribute of the label malfunctioning within an Angular directive?

As I delve into the world of angular directives, I have encountered success in many aspects. However, there is one minor issue that has been troubling me lately. Within my directive, I have set a for attribute to match the id of an input field. Strangely, ...

javascripthtmlangularjs

Expanding the last row to ensure its proper width with flex-grow

I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...

htmlcssresponsive-designflexboxflex-grow

Transforming Form Input Fields into a Nested JSON Format with the Power of JQuery

I'm facing a challenge in converting the input fields below into a nested JSON file structure in my HTML page. Despite trying various methods, I haven't been successful yet. These inputs are retrieved through AngularJS ng-repeat. Any assistance o ...

javascriptjqueryhtmljsonangularjs

What is the method for verifying whether x-iframe-options ALLOW-FROM is supported?

How can I determine if my browser supports X-IFRAME-OPTIONS and X-IFRAME-OPTIONS ALLOW-FROM in the http header, either through client-side or server-side methods? ...

html

How can Selenium in Python be used to click a JavaScript button?

I need help automating the click of a button on a webpage using selenium Here is the HTML for the button: <div class="wdpv_vote_up "> <input value="7787" type="hidden"> <input class="wdpv_blog_id" value="1" type="hidden"> </div& ...

javascriptjquerypythonhtmlselenium

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

javascripthtmljqueryjquery-events

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

htmlcsstextflexboxgraphical-logo

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

htmlpost

Add a hyperlink to a div element without directly editing the HTML code

Is it possible to add a link to the div using JavaScript instead of changing the HTML and inserting an <a>-tag? <div class="some-class">Some content</div> ...

jqueryhtmlhyperlink

Dropdown Navigation - Utilizing jQuery and CSS

I am encountering an issue with a dropdown menu I have been working on. Take a look at this screenshot for reference: Below is the snippet of HTML code: <ul class="topnav"> <li><a href="#">Home</a></li> <li> ...

jqueryhtmlcssmenudrop-down-menu

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

phphtmlcodeigniter

The collapsed form-control is adjusting its attributes while resizing

Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried vario ...

htmlcsstwitter-bootstrapuser-interfacetwitter-bootstrap-3

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

javascriptjqueryhtmlcss

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

<button class="btn" onClick="$('#firstModal').modal('show');">Click Here</button> <!-- Modal --> <div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden=" ...

jquerycsstwitter-bootstrapmodal-dialog

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

cssangularbootstrap-4angular-materialng-bootstrap

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

What is the method for incorporating a currency symbol into a jQuery mask?

I have successfully implemented the mask on the <td> element of the table, but now I would like to include the currency symbol before the value as shown in the example below. if ($(this).attr('title')==='Value') { $(+ ...

phpjqueryhtml

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

As a newcomer to web development, I have stumbled upon a perplexing issue. In my usage of d3.js (specifically the script found here), I have been attempting to incorporate additional features. I modified my JavaScript code to include a simple <p> ele ...

javascripthtmld3.js

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss