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

JSON data for DataTables

Having trouble adding state values to an object

Displaying HTML elements in a specific order using ng-repeat

npm: Import a package from a GitHub repository that does not belong to me

We could not locate the requested resource with a DELETE request using the fetch JSON method

When using CSS border-width:1px, I notice that the borders aren't consistently thin

Tips for displaying a setCustomValidity message or tooltip without needing to submit the event

What is the best way to set specific filenames in order to transmit them to the server?

Concealing a div based on the checkbox's updated selection

Can someone show me how to make an ajax request from a panel within a Firefox extension?

Utilizing VueJS to Establish a Binding Relationship with Props

Best method for creating HTML elements with jQuery

Display the URL with proper formatting in the print function

Creating a CSS animation to repeat at regular intervals of time

Bizarre symbols observed while extracting data from HTML tables produced by Javascript

Can you create a while loop that continuously asks for user input, stores the responses, and then makes them accessible in an array?

What are the best methods for creating genuinely random and highly secure session IDs?

Navigate to the AngularJS documentation and locate the section on monitoring data changes after a dropdown selection

Is the variable not being initialized outside of the function?

Ways to expand the height of a child element within a flex container that has been