How to dynamically adjust column width based on maximum content length across multiple rows in CSS and Angular

I am attempting to ensure that the width of the label column in a horizontal form is consistent across all rows of the form based on the size of the largest label. Please refer to the following image for clarification:

Screenshot Example

All label columns within the form should automatically adjust to the red line.

Below is the code I am using to create the form in the screenshot:

<form>
  <div class="form-group form-row">
    <div class="col-6 row">
      <label for="1" class="col-auto col-form-label">Label 1:</label>
      <div class="col">
        <input type="text" class="form-control" placeholder="">
      </div>
    </div>
    <div class="col-6 row">
      <label for="2" class="col-auto col-form-label">Label 2:</label>
      <div class="col">
        <input type="text" class="form-control" placeholder="">
      </div>
    </div>
  </div>

  <div class="form-group form-row">
    <div class="col-6 row">
      <label for="1" class="col-auto col-form-label">Label 1 row 2:</label>
      <div class="col">
        <input type="text" class="form-control" placeholder="">
      </div>
    </div>
    <div class="col-6 row">
      <label for="2" class="col-auto col-form-label">Label 2 much longer on row 2:</label>
      <div class="col">
        <input type="text" class="form-control" placeholder="">
      </div>
    </div>
  </div>

  <div class="form-group form-row">
    <div class="col-6 row">
      <label for="1" class="col-auto col-form-label">Label 1 is even longer on row 3:</label>
      <div class="col">
        <input type="text" class="form-control" placeholder="">
      </div>
    </div>
    <div class="col-6 row">
      <label for="2" class="col-auto col-form-label">2:</label>
      <div class="col">
        <input type="text" class="form-control" placeholder="">
      </div>
    </div>
  </div>
</form>

Is it possible to achieve this using Bootstrap 4 or other CSS? I am using it in an Angular app, so any help would be appreciated.

cssangularformslayoutbootstrap-4

Answer №1

One way to improve the layout is by organizing labels and inputs into separate columns.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="container">
  <form class="row">
    <div class="flex-column d-flex">
        <label>label 1</label>
        <label>label 2</label>
        <label>...long label 3...</label>
    </div>
    <div class="col flex-column d-flex">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
  </form>
</body>

However, it may be challenging to maintain correct heights as the "rows" are now separate entities.

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

Receiving a blank response after making a post request even though the request was processed without

While making a post request using httpClient, I am receiving a null response despite the request being processed successfully. File: serviceClass.ts this.httpOptions = { headers: new HttpHeaders( { 'Content-Type': 'application ...

angulartypescripthttprequest

Encountering an error when initializing a form array with an existing array of multiple objects in Angular 13: "Control not found with

Hey there, I'm brand new to Angular and I'm trying to set up a form array with an existing array that contains multiple objects. However, I keep encountering the following error: Cannot find control with path: 'variable-> 0 -> id&apo ...

angulartypescriptcontrolsangular-reactive-forms

Tips on how to center an image within a table cell:1. Insert the image

I've been attempting to center an image within a bootstrap4 table cell, but it keeps appearing on the left and even overlaps the border. I've tried adding inline styles like text-align: center; vertical-align: middle; both to the table cell HTML ...

htmlcssbootstrap-4

Utilize multiple background images in CSS with a set of three unique images

I have inserted three images into the background of my website's body. Two of them are displaying correctly (one with repeat-y), but the third one is not working. I've tried searching a lot but couldn't find a solution. body { backgr ...

css

Rotate a div using CSS by 10 degrees while spanning the full width

I stumbled upon the website recently, particularly noticing the Social News section on the side. I am curious about how to create rotated divs (around 10 degrees) that span the full width of a webpage. Is it possible to make this responsive so that it wor ...

jqueryhtmlcss

Encountering an issue with Angular build in Docker: [ERR_STREAM_DESTROYED] - Write function cannot be called after a stream

Below is the docker file I'm using to build my Angular project: FROM node:12-buster-slim as build-step RUN mkdir -p /app COPY . /app WORKDIR /app RUN chmod 777 -R /app RUN npm install ARG configuration=production RUN npm run build -- --output-path=./ ...

javascriptnode.jsangulardockernpm

Retrieving Color Values from Stylesheet in TypeScript within an Angular 2 Application

Utilizing Angular2 and Angular Material for theming, my theme scss file contains: $primary: mat-palette($mat-teal-custom, 500, 400, 900); $accent: mat-palette($mat-grey4, 500, 200, 600); There is also an alternate theme later on in the file. Within one ...

angulartypescript

Ways to eliminate duplicate objects from an array using Angular 6

I'm having trouble removing duplicate value objects in an array and it's not working as expected. I believe the duplicate function is functioning correctly, but the changes are not being reflected in the li list. Can you pinpoint where I need to ...

angulartypescriptangular5angular6angular2-services

Angular: A module in the library declares an HttpInterceptor that intercepts requests that are made outside of the

I am encountering an issue with Angular where a custom instance of HttpInterceptors within an Angular library is intercepting requests for HttpClient calls made outside the library (i.e. in the consuming application). I'm finding it difficult to gras ...

angulardependency-injectionangular-httpclientangular-http-interceptorsinjection-tokens

Angular: Discover the best way to delegate translation tasks to your S3 bucket!

I am currently using ngx-translate for handling translations in my Angular application. Everything is functioning properly when the translation files are stored within the app itself. However, I want to move all of my JSON translation files to an AWS S3 bu ...

angulartypescriptamazon-web-servicesamazon-s3ngx-translate

Converting text to icons and adding tooltips using only CSS

I am faced with the challenge of transforming a hyperlink into an icon while converting the text content into a tooltip using only CSS and without the ability to modify the HTML or add JavaScript. Data is being extracted from an external source in the form ...

htmlcss

The slideshow fails to show correctly after being loaded from an external JavaScript file

Utilizing standard code, I have set up a Slideshow at the top of a website: HTML: <body id="Top" onload="showSlides()"> ... <div id="slides"> <div id="slide1" class="slides fade"></div> <div id="s ...

javascriptcss

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

htmlcssheightfixed

The term 'required' is not recognized as an identifier. There is no member by the name of '__type' in the definition

When working on my HTML template in the visual code editor, I encountered the need to declare a variable with type any? https://i.stack.imgur.com/Jq5az.png product-form.component.html <div class="row"> <div class="col-md-6"> <for ...

angulartypescriptangularfire2

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

htmlcsstags

Create a functioning implementation for retrieving a list of objects from a REST API

I am looking to incorporate an Angular example that retrieves a list from a REST API. Here is what I have attempted: SQL query: @Override public Iterable<Merchants> findAll() { String hql = "select e from " + Merchants.class.getName ...

springangulartypescript

Tips for creating a star rating input field in a review form: Rails 7, Bootstrap, without using jQuery

As I develop a Rails 7 application using bootstrap (without jquery), users have the ability to leave reviews for different parks. One of the review criteria is a 5-star rating. Currently, the form input for the rating is a text_field, but I want to change ...

ruby-on-railsformsbootstrap-5ratingrails7

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

javascripthtmlcss

AG Grid is displaying improperly within Angular

I am facing an issue with using ag-grid in my project. The output is not as expected and I am unsure of what the problem might be. Here is a snippet of my HTML code: <p>user-access works!</p> <ag-grid-angular style="width: 500px; height: 50 ...

angular