Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

Question

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

What is the reason for the misalignment of

glyphicon-warning-sign form-control-feedback

vertically in the code below after applying font-size: 20px; to the label?

<div class="container">

      <div class="content align-left contact">
        <p>Hello World!</p>
        <form action="#" method="post" id="contact-form">

          <div class="form-group has-error has-feedback">
            <label for="inputName">Your Name (required)</label>
            <input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
            <span id="inputWarning2Status">(warning)</span>
          </div>

        </form>
      </div>

</div>

CSS:

.has-feedback .form-control-feedback {
    border: 1px solid black;
}

.content {
  padding: 100px;
}
.content p {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 30px;
  padding-bottom: 20px;
}
.content.contact label {
  font-weight: 700;
}
.content.contact label {
  font-size: 20px; //this is where the issue arises - but why!???
}

Result:

https://i.stack.imgur.com/QziwU.png

The warning text is not red either.

Any suggestions or solutions?

Check it out at jsfiddle, although I couldn't find bootstrap as the load option!

EDIT:

You can observe the bug at bootply

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Although Brad's answer is good, it only addresses part of the issue. When you adjust the size of the label or add more content before the input field, the layout gets disrupted. To prevent this, make sure to enclose the .form-control-feedback element within a common parent container alongside the input field. Here is the CSS code to add:

.warning {
  color:#a94442;
}
.my-group {
  position: relative;
}

Don't forget to update your HTML as follows:

<div class="form-group has-error has-feedback">
    <label for="inputName">Your Name (required)</label>
    <div class="my-group">
        <input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
    </div>
    <span id="inputWarning2Status">(warning)</span>
</div>

For a demonstration, you can check out this working demo: http://www.bootply.com/jGxRAFMKkg

Answer 2

Although Brad's answer is good, it only addresses part of the issue. When you adjust the size of the label or add more content before the input field, the layout gets disrupted. To prevent this, make sure to enclose the .form-control-feedback element within a common parent container alongside the input field. Here is the CSS code to add:

.warning {
  color:#a94442;
}
.my-group {
  position: relative;
}

Don't forget to update your HTML as follows:

<div class="form-group has-error has-feedback">
    <label for="inputName">Your Name (required)</label>
    <div class="my-group">
        <input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
    </div>
    <span id="inputWarning2Status">(warning)</span>
</div>

For a demonstration, you can check out this working demo: http://www.bootply.com/jGxRAFMKkg

Answer 3

Answer №2

1) To enhance your jsfiddle experience, consider incorporating external resources using the bootstrap CDN found on the left side of the screen.

2) The issue lies in the font-size set for the label, causing compatibility problems with the fixed icon. For further details, refer to bootstrap documentation.

3) HERE'S THE SOLUTION: Include the following CSS code:

.has-feedback label~.form-control-feedback {
  top:33px;
}
.warning {
  color:#a94442; /*apply this class to your warnings span*/
}

DEMO https://jsfiddle.net/10yLhpu3/

Answer 4

1) To enhance your jsfiddle experience, consider incorporating external resources using the bootstrap CDN found on the left side of the screen.

2) The issue lies in the font-size set for the label, causing compatibility problems with the fixed icon. For further details, refer to bootstrap documentation.

3) HERE'S THE SOLUTION: Include the following CSS code:

.has-feedback label~.form-control-feedback {
  top:33px;
}
.warning {
  color:#a94442; /*apply this class to your warnings span*/
}

DEMO https://jsfiddle.net/10yLhpu3/

Answer 5

Answer №3

Make sure to include the following in your stylesheet:

.icon-warning{
  margin-top:10px;
}

#inputWarningStatus{
  color:#ff0000;
}

http://www.bootply.com/as89jdfFjf

By adding these styles, everything should function correctly.

Answer 6

Make sure to include the following in your stylesheet:

.icon-warning{
  margin-top:10px;
}

#inputWarningStatus{
  color:#ff0000;
}

http://www.bootply.com/as89jdfFjf

By adding these styles, everything should function correctly.

Answer 7

Answer №4

Change the appearance of this element

.content.contact label {
  font-size: 20px; 
}

Add a cautionary message to this section

<span class="glyphicon glyphicon-warning-sign form-control-feedback warning" aria-hidden="true"></span>

Introduce a new class name and update the style previously removed with this change

.warning {
     font-size: 20px;
}

Answer 8

Change the appearance of this element

.content.contact label {
  font-size: 20px; 
}

Add a cautionary message to this section

<span class="glyphicon glyphicon-warning-sign form-control-feedback warning" aria-hidden="true"></span>

Introduce a new class name and update the style previously removed with this change

.warning {
     font-size: 20px;
}

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Activate browser scrollbar functionality

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

Deciphering the Mysteries of HTTP Headers

Prisma encountered an error with the database string: Invalid MongoDB connection string

What is the proper way to place the authorization header for a background image using the url()

Expo: A guide on integrating expo code into an existing Android project

Ajax transmitting data with concealed characters

The Jquery.post() function failed to trigger the callback

Displaying fresh data from a JSON URL by clicking on a button and dynamically refreshing the view in

Utilizing the power of $.ajax() to parse through an XML document

Tips for creating a Bootstrap table with a "table-bordered" style, fixed header, and scrollable body

Using jQuery to extract information from a serialized array in ColdFusion

VueJS form validation does not account for empty inputs in both fields

retrieve the Jquery progress bar's current value

What are the steps for installing the latest version of popper, v2?

The combination of HTML Agility Pack and VB.NET is a powerful duo for web

Leveraging $http or $timeout in conjunction with $stateProvider in AngularJS

The task of mapping an array of objects with nested values using JavaScript is proving to

Bootstrap Datepicker - dropup instead of dropdown

Access the filtered data with Vuex and Firestore to display the results