Change width of the Validation error message div

Mark Heller 0
Viewed 62

enter image description here

This is how the error message is getting displayed once the validations are added. It only takes the width of that div. How can I change the width so the error message fits a single line? If there's any other way to do front-end validations please suggest it.

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

bootstrap-5 css html
4 Answers

Set the width of the invalid-feedback block to max-content.

The max-content sizing keyword represents the maximum width or height of the content. For text content, this means that the content will not wrap at all even if it causes overflows.

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

Here's the MDN page on it: https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

Jamie Calder0

You can't really change the width of your invalid-feedback element because it's max width is being controlled by its parent input-group age. I'd suggest removing the age class and instead apply it to its first two children, minus its third child invalid-feedback.

Note: I also increased the max width of the age class, otherwise the validation icons' are obtruding the view of the validation text due to lack of space.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/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>

RPaladin0
Gibloor0

You can fix this by simply adding a width value to the label.

.invalid-feedback {
    width: 250px; /* OR max-content */
}
FUZIION0
Related