Search code examples
csstwitter-bootstrapglyphicons

Bootstrap Glyph Icon Textfield

I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.

Maybe someone has some hints for me - why is that?

FormWithWrongGlyphIcon

<!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="name2"></label>
            <div class="col-md-4">
                <input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">

            </div>
        </div>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="gender">Geschlecht</label>
            <div class="col-md-4">
                <label class="radio-inline" for="gender-0">
                    <input type="radio" name="gender" id="gender-0" value="1" checked="checked">
                    männlich
                </label>
                <label class="radio-inline" for="gender-1">
                    <input type="radio" name="gender" id="gender-1" value="2">
                    weiblich
                </label>
            </div>
        </div>


        <div class="form-group">
            <label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
            <div class="col-md-4">
                <div class='input-group  date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker2').datetimepicker({
                                language: 'de'
                            });
                        });
                    </script>

                </div>
            </div>
Solution

  • Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)

    The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.

    Update:

    It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:

    .input-group {
  max-width: 280px;
}

    Demo: http://jsfiddle.net/WNAB8/5/