Troubleshooting the Height Problem in Bootstrap Divisions

Can someone help me align the height of the alert box with the input field? I've tried using Bootstrap classes but can't seem to get it right.

I attempted using col-mb-4 in the alert class, but the height alignment is still off.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7d7b6879493c273b273a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

When dealing with rows as flex containers, you have the option to utilize align-items-stretch to ensure all child elements are of full height. Adding h-100 to the input element will also extend its height to match the row. To prevent the alert's margin from affecting its height, remove it and consider using padding on the row for spacing. Additionally, you can reduce the vertical padding of the alert with py-1 if needed.

The key advantage here over fixed-size solutions like padding is the fluidity it offers. Regardless of the alert element's height, the input will adjust accordingly.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74161b1b00070006150434415a465a47">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row align-items-stretch">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control h-100" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger mb-0 py-1" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>

Answer №2

To customize the alert class, simply add "m-0 p-1" like this:

<div class="container-fluid">
  <div class="mb-3 row">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    
    <div class="col-5">
      <input type="text" class="form-control" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger m-0 p-1" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>

  </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

What is the best way to target the first child element in this scenario?

Is there a way to target only the p tag with id="this" using .root p:first-child selector? Here is the code snippet: Link to CodePen .root p:first-child { background-color: green; } p { margin: 0; } .container { display ...

htmlcss

The argument 'TabsCtrl1' is throwing an error as it is not recognized as a valid function and is showing as

I have encountered a problem with my controller, and I am seeing the following error message: Error: [ng:areq] Argument 'TabsCtrl1' is not a function, got undefined http://errors.angularjs.org/1.3.0-beta.11/ng/areq?p0=TabsCtrl1&p1=not%20a%20 ...

javascriptangularjshtml

transferring a webpage to a collaborative platform

We currently have an intranet with numerous html pages and various attachments such as .doc and .xls files. We are contemplating migrating all of this to Confluence WIKI. Is there any script or automated tool available that can assist us in this migratio ...

htmlwiki

Techniques for parsing a String in Objective-C

I am looking to parse a string to replace certain elements within it. If the string contains an <ol> tag, I want to specifically focus on replacing the <li> elements with numbers. I understand that I can utilize the rangeOfString method to c ...

htmlobjective-ciosxcodeparsing

The collapsible list feature that includes the use of plus and minus signs is malfunctioning

Below is the script that I wrote to address this issue, but for some reason the + and - swapping is not functioning correctly. $('.showCheckbox').click(function(e) { var dynamicBox = $(this).attr('val'); var collapseSign = $(th ...

javascriptjqueryhtml

Dealing with full-width elements on mobile devices

I've got a pretty basic question here but can't seem to find a straightforward answer. I'm using Bootstrap to style a website and struggling with making it mobile-responsive. Following the given answer, I used this code to show a button ne ...

htmlcssclassselectbootstrap-4

Unexpected error occurs when modifying HTML5 video source using JQuery on Internet Explorer

Currently, I am working on developing a web application using asp.net, Bootstrap, and JQuery. While testing it on LocalHost, I encountered an issue that needs debugging. The navigation bar of my application has a dropdown menu with links to tutorial video ...

javascriptjqueryhtmltwitter-bootstrapvideo

Insert, delete, and modify rows within the table

I'm struggling with a JavaScript issue and could use some help. How can I add a new row for all columns with the same properties as the old rows, including a "remove" button for the new row? Is there a way to prevent editing cells that contain b ...

javascripthtml

When a dialog box is displayed, a scrollbar will automatically appear

I've encountered a strange issue while working with Angular dialogs: A vertical scrollbar unexpectedly appears, even though I've set the dialog to have a fixed width. component.ts const dialog = this.dialog.open(DialogComponent, { width: ...

htmlcssangular

Adjust the appearance of self and other classes on hover using CSS

I'm looking for a way to use the :hover effect in CSS to change the font color of one class (.footer_status_tex) and the background color of another class (.footer_status_gear). Here's a simplified version of what I have in mind: CSS .footer_s ...

csshover

The craft of masonry is known for its creation of intentional gaps

I've gone through all the posts related to this issue, but none of the suggested solutions seem to work for me. Here is a visual representation of my grid: https://i.sstatic.net/ybufk.png If you want to see the code and play around with it, check o ...

javascripthtmlcssgrid-layoutmasonry

Step-by-step guide on clipping a path from an image and adjusting the brightness of the remaining unclipped area

Struggling to use clip-path to create a QR code scanner effect on an image. I've tried multiple approaches but can't seem to get it right. Here's what I'm aiming for: https://i.stack.imgur.com/UFcLQ.png I want to clip a square shape f ...

javascripthtmlcss

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

javascriptjqueryhtmlrandomaudio-player

How can I auto-resize an embedded HTML document within another?

I have a collection of HTML help files that I need to consolidate into one large file for printing at the request of my boss. My plan is to simply embed them all in a single HTML page and have the <object/> automatically resize to fit the entire page ...

html

What is the method to process a JSON path containing a special character like "@"?

I'm attempting to retrieve JSON data from an API with the following structure. My current approach involves using JavaScript. The code snippet I have utilized is displayed below. <p>"stations": [</p> <p id="data"></p> ...

javascriptjqueryhtmljson

Tips for extracting text from a selenium webelement icon that displays hovertext

Let's use Amazon as an example. Suppose we want to extract the star rating for a product. When hovering over the stars, we see a text element that says "4.0 out of 5 stars" and upon inspecting the code, we find: <span class="a-icon-alt">4.0 ou ...

pythonhtmlpython-3.xseleniumselenium-webdriver

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

phphtmlcssajax

Is there a way to use CSS to prevent a user from being able to click on a table?

My CSS table appears standard: <table class="form grid"> <thead> <tr> <th>EId</th> <th>Number</th> ...

htmlcss

Is it possible for Angular to retrieve information from one JSON file but not another?

After updating the names in the code to reflect the current ones, I would greatly appreciate any help or suggestions! The json file has been provided, so there's not much additional setup required. Just a heads up: I haven't created a service fi ...

javascripthtmlangulartypescript