cssflexboxtailwind-css
Flex and Tailwind CSS rows auto stretching
I am really struggling with a two column forms. I am using flex and tailwind css. Here is the part of my html causing the trouble
<div class="w-full flex flex-row flex-wrap">
<div class="w-full flex flex-row flex-wrap md:w-1/2 p-2">
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>First Name</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberFirstName').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>Last Name</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>Address1</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('address1').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>Address2</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('address2').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>City</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('city').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>PostCode</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('postcode').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="w-full flex flex-row flex-wrap md:w-1/2 p-2">
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Membership Number</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Joining Date</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Gender</mat-label>
<mat-select>
<mat-option value="select1-1">Male</mat-option>
<mat-option value="select1-2">Female</mat-option>
</mat-select>
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:map-pin'"></mat-icon>
<mat-error *ngIf="membershipForm.get('gender').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Date of Birth</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
Here what happens is on the left side there are 3 rows. But on right side there are only 2 rows. But right side adjusts its height to adjust with left side causing some misalignment. Please check the below screen shot.
I tried specifying items-start to the right column. Doesnt make any difference.
I need the gender and date of birth things to just align with the second row on the left. I am happy to leave that 3 row empty. If I add a third row to the right, its aligning correctly which I dont want.
Solution
Apply align-items: flex-start to the root element that wraps the two columns. This will mean that each column will only be as high as the content within:
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<div class="w-full flex flex-row flex-wrap items-start">
<div class="w-full flex flex-row flex-wrap md:w-1/2 p-2">
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>First Name</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberFirstName').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>Last Name</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>Address1</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('address1').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>Address2</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('address2').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>City</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('city').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
<mat-label>PostCode</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('postcode').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="w-full flex flex-row flex-wrap md:w-1/2 p-2">
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Membership Number</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Joining Date</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
<div class="flex flex-wrap w-full -mx-2">
<div class="md:w-1/2 px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Gender</mat-label>
<mat-select>
<mat-option value="select1-1">Male</mat-option>
<mat-option value="select1-2">Female</mat-option>
</mat-select>
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:map-pin'"></mat-icon>
<mat-error *ngIf="membershipForm.get('gender').invalid"> Required </mat-error>
</mat-form-field>
</div>
<div class="md:w-1/2 w-full px-2">
<mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
<mat-label>Date of Birth</mat-label>
<input matInput />
<mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>- CSS Flexbox Gap - gap value affecting width calculation
- How to use "repeat()" css function combined with Angular ngStyle directive?
- CSS Modules and CSS keyframe animations
- Difference between Localhost and opening html file
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- Issue with animation, skips half of it's way
- Vertically align text within input field of fixed-height without display: table or padding?
- hover over image effect: shadow
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- applying the same selectors on sibling have a slightly different behaviour
- How to overwrite css style
- How to create checkbox inside dropdown?
- Add image or text onto all JSP pages through Struts or CSS
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- What to use in place of ::ng-deep
- Select specific element before other element
- How to change font for the CodeMirror editor
- Make circle image according to screen size with CSS
- Div taking all horizontal space
- -webkit-backdrop-filter not working on Safari
- Nested Flexbox for navbar
- How to create a Numbering marker in CSS?
- Put text under drag-n-drop area
- Remove the space between 2 elements under each other using flex
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How to dim an image keeping transparency untouched with CSS or JS?