Adjust the size of the Error Validation message container

https://i.sstatic.net/e6Lor.png

Once validations are added, the error message is displayed within the width of that div. How can I adjust the width to make the error message fit on a single line? Alternatively, if there are other methods for front-end validations, please provide suggestions.

.age {
  width: 53px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.6);
}

.input-group {
  margin-bottom: 9px;
  position: relative;
}

.input-group__label {
  z-index: 5;
  display: block;
  position: absolute;
  top: 0;
  line-height: 40px;
  color: #aaa;
  left: 5px;
  padding: 0 7px;
  transition: line-height 200ms ease-in-out, font-size 200ms ease-in-out, top 200ms ease-in-out;
  pointer-events: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.6);
}

.input-group__input {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px !important;
  padding: 0 10px;
}


   
<div class="input-group age">
                    <input class="input-group__input form-control is-invalid"
                           type="text"
                           placeholder="&nbsp;"
                           name="age"
                           id="validationError"
                           autocomplete="off"
                           required />
                    <label class="input-group__label" for="age">Age</label>
                    <div class="invalid-feedback">
                      Please enter an age between 35-74
                      years.
                    </div>
                  </div>

htmlcssbootstrap-5

Answer №1

If you're trying to adjust the width of your invalid-feedback element, you may run into limitations as its maximum width is determined by its parent element input-group age. One solution would be to remove the age class and apply it to the first two children instead, excluding the third child which contains invalid-feedback.

Please note: To prevent the validation icons from overlapping with the text, I have also increased the maximum width of the age class.

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa6baa5">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d110d12">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
    .age {
        max-width: 96px;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .input-group {
        margin-bottom: 9px;
        position: relative;
    }
    .input-group__label {
        z-index: 5;
        display: block;
        position: absolute;
        top: 0;
        line-height: 40px;
        color: #aaa;
        left: 5px;
        padding: 0 7px;
        transition: line-height 200ms ease-in-out, font-size 200ms ease-in-out, top 200ms ease-in-out;
        pointer-events: none;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.15px;
        color: rgba(0, 0, 0, 0.6);
    }
    .input-group__input {
        width: 100%;
        height: 40px;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 4px !important;
        padding: 0 10px;
    }
</style>
<div class="input-group">
  <input class="age input-group__input form-control is-invalid"
         type="text"
         placeholder="&nbsp;"
         name="age"
         id="validationError"
         autocomplete="off"
         required />
  <label class="age input-group__label" for="age">Age</label>
  <div class="invalid-feedback">
    Please enter an age between 35-74 years.
  </div>
</div>

Answer №2

Make sure the invalid feedback block is set to its maximum content width.

The max-content sizing keyword defines the maximum width or height of the content, preventing text from wrapping even if it overflows.

.invalid-feedback{
  width: max-content;
}

For more information, check out the MDN page here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

Answer №3

To enhance the positioning of the "input-group", set it to "position: relative" and apply "position: absolute, width: max-content" to the "invalid-feedback"

Using absolute position will elevate it above other elements on the page

Check out an example here

Answer №4

To resolve this issue, all you need to do is specify a width for the label.

.error-message {
    width: 250px; /* or use max-content */
}

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

Troublesome display problem with photo gallery

I have encountered an issue with the image gallery in my HTML file. The images are displaying nicely, but on the second row, three of the images are slipping down. Here is a screenshot for reference: https://i.sstatic.net/YmPdv.png I attempted to address ...

htmlcssflexbox

Animate failed due to the appending and adding of class

$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...

javascriptjquerycssanimationanimate.css

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

javascripthtml

What is the best way to manage the changing selection in a drop-down list?

Can someone help me with a coding issue I am facing? <select name="txtTK" > <option value="None">---</option> <option value="Mat">Materials</option> <option value="Cate">Category</option> <option ...

javascripthtmlajaxasp-classic

Develop a game timer using CreateJS

Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...

javascripthtmlcordovaeaseljscreatejs

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Is there a way to ensure that Jade automatically updates the HTML template when the linked CSS file is modified, using livereload and Grunt?

Currently, I am in the process of setting up Grunt to ensure that whenever a linked .css file undergoes a change, the jade template which is linked to the .css file also automatically reloads. However, I am facing challenges with compiling my jade template ...

cssexpressgruntjspuglivereload

Include token in src tag requests Angular version 8

In the process of developing a website, I have encountered a challenge. I am creating a platform where users can access another website I am currently working on after they log in. Once authorized, users receive a JWT token which is sent in the header with ...

javascripthtmlangularasp.net-core

What is the best way to include a dropdown menu in a navigation bar?

I am looking for guidance on adding a dropdown menu to my navbar in place of the "social media" section. Below is the code snippet I have been working with: <span class="navbar-toggler-icon"></span> </button> <div class="co ...

htmlcssdrop-down-menunavbar

Why hasn't the string been properly encoded?

Consider the scenario below: string text = "this is an example of formatted \"string\""; When I display this as a plain string in my web API method: return Ok(text) it will output: this is an example of formatted "s ...

c#htmlasp.netjsonasp.net-core

Tips for preventing the parent element's height from fluctuating when displaying a child div using v-if

I have a main container and an inner container. The inner container is displayed using v-if. I want to include a transition effect on the inner element, but after the transition ends, the height of the parent container changes abruptly and looks unattracti ...

cssvue.jsvuejs2vue-componenttransition

Looking to retrieve and display card information within their respective modal using PHP

I am facing an issue with displaying extra data in a modal for my card. I want to access the card ID and its specific data in the modal of the corresponding card. However, when I tried using the same PHP code in the modal, it ended up showing data from eve ...

phphtmljqueryajax

The dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova

Receive the height from the parent element using the box-sizing property set to border-box

Let's talk about a CSS challenge. .parent{box-sizing: border-box; height: 60px; border: 1px solid green;} The child div has its own styling: .child{height:inherit;background: red} Here is the code snippet: ...

css

What is the process for recording a video?

After researching extensively, I am eager to use a plugin that combines jQuery and flash to record a video using the system's Webcam. I came across scriptcam, but unfortunately, I encountered an issue where the plugin hangs on document load and the li ...

javascriptjqueryhtmlcssjquery-webcam-plugin

The Salvattore grid became unresponsive and malfunctioned as soon as AngularJS was integrated

After incorporating AngularJS into my project, Salvatore grid suddenly ceased to function and stopped rendering properly. I am interested in utilizing the ng-repeat feature to iterate through all items and showcase them within the Salvatore grid layout. ...

javascripthtmlangularjsangularjs-ng-repeat

How can I prevent the same JavaScript from loading twice in PHP, JavaScript, and HTML when using `<script>'?

Is there a PHP equivalent of require_once or include_once for JavaScript within the <script> tag? While I understand that <script> is part of HTML, I'm curious if such functionality exists in either PHP or HTML. I am looking to avoid load ...

javascripthtml

Displaying JSON data using FormControls in Angular 5

Upon receiving Json values from the server, I am encountering an issue while binding them to respective textboxes. The problem arises as the value in the textbox appears as [object object] <h1>{{title}}</h1> <h3>Catalog</h3> ...

htmljsonangulartypescript

Struggling to choose an element by ID and classname?

Currently, I'm diving into the world of HTML and CSS and have encountered a question about selecting elements in CSS. I understand that we use .Classname{} to select a class and #IDname{} to select an ID. But my main confusion lies in trying to selec ...

htmlcsscss-selectors

Are there any performance implications when using an excessive number of background images in CSS?

My website seems to be running too slowly based on user reports. I suspect that the background images in CSS may be causing the issue. The site uses a custom build system to concatenate and compress all CSS, create CSS sprites automatically, resulting in ...

cssperformancebackground-imagecss-sprites