Use of glyphicons in input-group-addons

[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.php

If 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.

[cvrebert]

The alignment problem is that you need to nest the glyphicon classes; they generally shouldn't be directly combined with other classes.

i.e., you should use:

<span class="input-group-addon">
  <span class="glyphicon glyphicon-remove"></span>
</span>

[ghost]

Worked perfectly. WOOHOO! Thanks!

It even appears that I won’t need the blank glyphicon as a placeholder using this tag structure. Cool!

Thanks!

On Dec 5, 2013, at 2:43 PM, Chris Rebert notifications@github.com wrote:

The alignment problem is that you need to nest the glyphicon classes; they generally shouldn't be directly combined with other classes.

i.e., you should use:

— Reply to this email directly or view it on GitHub.

[ghost]

Quick question:

I want to have multiple form fields in a single row with their labels at the top left of each field, for example:

On row 1, the first name, middle initial, last name and generation

On row 2, Address Line 1 and Address Line 2

On row 3, city, state, zip, and country

etc.

How does one accomplish that in BS3? The documentation doesn’t seem to cover this, though the 2.3.x documentation did.

Thanks!

Steve

Rev. Steve Willis
Director of Software Development
Life Christian University
P.O. Box 272360
Tampa, Fl 33688
(928) 899-9895

On Dec 5, 2013, at 2:43 PM, Chris Rebert notifications@github.com wrote:

The alignment problem is that you need to nest the glyphicon classes; they generally shouldn't be directly combined with other classes.

i.e., you should use:

— Reply to this email directly or view it on GitHub.

[cvrebert]

Sorry, we don't answer how-to questions here; but you'd basically just use the grid system, without .form-horizontal or .form-groups.

[mdo]

This general idea is what I wanted to do for contextual states—the icons—since I redid all this stuff. Will try to work it into v3.1.

[ghost]

In 2.3.x, there used to be the ability to set up form control-groups in a row so that like things could be grouped on the same row with the form labels at the upper-lefthand corner of each field.

There seems to be no counterpart in V3. What’s up with that?

On Dec 5, 2013, at 4:47 PM, Mark Otto notifications@github.com wrote:

This general idea is what I wanted to do for contextual states—the icons—since I redid all this stuff. Will try to work it into v3.1.

—
Reply to this email directly or view it on GitHub.

[mdo]

@UNPOCOLOCO It was replaced by using the grid. A bit more flexible than v2.x.

[ghost]

So if control-group defines a row now, what

class do I wrap the field and label in? col-md-x?

On Dec 5, 2013, at 7:02 PM, Mark Otto notifications@github.com wrote:

@UNPOCOLOCO It was replaced by using the grid. A bit more flexible than v2.x.

—
Reply to this email directly or view it on GitHub.

[mdo]

This was addressed in #11836 without the use of input groups.