1

It should be simple but I can't see the problem. I'm building a page like menu in the center and a search box with icon on the right side, I'm using keystonejs, pugjs and bootstrap. Here's the problematic part of code:

div(style='margin-top:60px; width:1000px')
  row
    div.col-md-2.col-md-offset-4.text-left
      a(href='/keystone') Hommes
    div.col-md-2
      a(href='/keystone') Femmes
    div.col-md-2.text-right
      a(href='/keystone') Enfants
    div.form-group.col-md-1.col-md-offset-1
      div.form-group.has-feedback
        input(class='form-control', type='text', id='search-addon')
        i(class='glyphicon glyphicon-search form-control-feedback')

it compiles in:

<div style="margin-top:60px; width:1000px;">
      <row>
        <div class="col-md-2 col-md-offset-4 text-left"><a href="/keystone">Hommes</a></div>
        <div class="col-md-2"><a href="/keystone">Femmes</a></div>
        <div class="col-md-2 text-right"><a href="/keystone">Enfants</a></div>
        <div class="form-group col-md-1 col-md-offset-1">
          <div class="input-group has-feedback">
            <input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search form-control-feedback"></i>
          </div>
        </div>
      </row>

The produced HTML looks OK, but the display doesn't include the icon in the input like in this fiddle

Here's what it displays enter image description here

What am I doing wrong ... again :) Thanks

user3013860
  • 77
  • 1
  • 8

2 Answers2

0

Try wrapping

i(class='glyphicon glyphicon-search form-control-feedback')

in

span.input-group-addon

more: http://getbootstrap.com/components/#input-groups

ex:

div.form-group.has-feedback
  input(class='form-control', type='text', id='search-addon')
  span.input-group-addon
   i(class='glyphicon glyphicon-search form-control-feedback')
Avraham
  • 916
  • 1
  • 13
  • 25
0

I changed the code from 

<div class="form-group col-md-2">
    <div class="form-group has-feedback">
        <input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search"></i>
    </div>
</div>

To 

<div class="col-md-1 col-md-offset-1">
                <div class="form-group">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control"/>
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </div>
            </div>

It displays correctly. But I've found that some argue that the problem is related tothe label that's mandatory https://github.com/twbs/bootstrap/issues/12911 and https://github.com/twbs/bootstrap/issues/12873

user3013860
  • 77
  • 1
  • 8