Bootstrap icon height get an increase while the validation message rises up

[Jating]

Hello There,

I faced issue related to bootstrap icon placed in the text field on the right side by using span tag. Well issue is that, whenever a validation message displays like this field if required, icon height get increasing more than text field height.

Here I have attached a screenshot and also add code, how I make an icon on the right side of the text box.

<input type="text"
	class="form-control datepicker hasDatepicker"
	name="dateOfBirth" id="dateOfBirth"
	placeholder="Birthdate" onkeypress="return false;"
	onpaste="return false;" oncopy="return false;" required >
<span class="btn btn-info1 btn-simple input-group-addon" onclick="return false;" style="cursor: default;"><i class="fa fa-calendar"></i></span>

[ronpat]

Hi, Jating. Welcome to the forums.

Would it be possible to post a link to your dev site? There is not enough code for us to tell exactly what is happening.

[Jating]

@ronpat when submit event fired and any field remains blank or not fill up, validation message generated on the element. And bootstrap icon height increase.

Sorry, I can’t share any site link.

[ronpat]

From your screen shot, it looks like the “error message” and the icon are in the same box, and when the “error message” becomes visible, the space over and under the icon increases so the icon will remain vertically “middled”.

Try putting the “error message” in a different box from the text field and the icon.

[PaulOB]

There’s a similar question here which (in the last answer) suggests the same answer as Ron mentions above.

You’d need to make a working demo for more help as there are different validation plugins around.