Currently, I am in the process of developing a form and implementing validation on my bootstrap form using bootstrap components. To handle server side validation, I am utilizing a c# class library, and then using c# code-behind to apply styles when the form meets certain validation conditions. The structure of my form control is contained within a panel as shown below:
<asp:Panel ID="TeacherNamePanel" CssClass="form-group" runat="server">
<asp:TextBox ID="tbTeacherName" CssClass="form-control input-lg" placeholder="Teacher-in-charge" runat="server"></asp:TextBox>
</asp:Panel>
In the code-behind, I validate the style like this:
if (teacherName.Length == 0)
{
TeacherNamePanel.CssClass = "form-group has-error has-feedback";
Label span = new Label();
span.CssClass = "glyphicon glyphicon-remove form-control-feedback";
span.Attributes["style"] = "vertical-align:middle";
TeacherNamePanel.Controls.Add(span);
}
else
TeacherNamePanel.CssClass = "form-group";
However, I am facing an issue where the glyphicon is not centered within the input control of my form, appearing slightly lower than expected. I have attempted to adjust the positioning by changing the "top" value for ".has-feedback .form-control-feedback" in the CSS file, but so far I have been unsuccessful.