Use of glyphicons in input-group-addons
Created by: ghost
I came up with an idea using BS input-groups for a nice UI feature for my web forms.
The idea is to place a checkmark glyphicon-ok immediately to the right of a form field to indicate success and a glyphicon-remove to indicate failure. I have the whole thing working perfectly using custom jQuery-based JS code that adds and removes the relevant classes as the field validation succeeds or fails.
Under BS 2.3.x, I had used home-brew colorized glyphicon image files, some custom CSS, and the help-inline class for this purpose, but with help-inline's demise and the switch to font-based glyphicons in BS 3, I switched to using input-groups and adjusted my code accordingly.
The problem is a minor aesthetic issue with how input-groups containing a glyphicon are rendered in a browser. Whenever the glyphicons appear in the input-group-addon, the whole input-group-addon shifts downward by a couple of pixels in every browser (Mac and Win, including IE 8-11) other than FF. Frankly, it looks tacky.
If I use the radical and times HTML entities from a standard webfont instead of a glyphicon, the input-group-addon doesn't shift, but none of the standard web fonts have versions of these entities that look half as good as a glyphicon.
Another issue that I would appreciate help with is for you to create a blank glyphicon (glyphicon-blank) that can be used as a placeholder in a stateless input-group-addon so the input-group-addon won't change sizes as the checkmark or X appear.
I created a stub page to illustrate the problems at:
http://www.lcudev.com/test.php A working example of a production form using my technique is at:
http://www.lcudev.com/problem-report/index.phpIf the site asks you to authenticate, the username is "dev" and the password is "dev123". The security exists to keep the search engines from showing development pages alongside the production site in the results for our university.
Here is a screenshot of the stub page:
If you like my idea, I would be happy to discuss your incorporating it into a future release of Bootstrap.