Bootstrap search field with icon in navigation header not appearing correctly

Question

I'm attempting to add a search box with a header to my Bootstrap 3 template. The template that I'm using was purchased from the Bootstrap themes page and is the Light UI Dashboard theme.

I found this answer on Stack Overflow but it's not appearing correctly (it appears incorrectly in both Chrome and Edge).

How to add a search box with icon to the navbar in Bootstrap 3?

I modified my code to include the search box in my header however the glyphicon doesn't display and the search box is out of alignment. Here is a screen shot.

My code is as follows:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

<form runat="server">
  <!-- Fixed navbar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Crown Ent.</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-left">
          <li role="presentation" id="dashboard"><a href="./">Dashboard</a></li>
          <li role="presentation" id="workorders"><a href="workorders.aspx">Work Orders</a></li>
          <li role="presentation" id="invoices"><a href="invoices.aspx">Invoices</a></li>
          <li role="presentation" id="accounts"><a href="accounts.aspx">Accounts</a></li>
          <li role="presentation" id="people"><a href="people.aspx">People</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
          <li><a runat="server" href="~/admin">Settings</a></li>
          <li><a runat="server" href="~/admin">Help</a></li>
        </ul>

        <form class="navbar-form" style="padding-top:5px;">
          <div class="form-group" style="display:inline;margin-top:5px;">
            <div class="input-group" style="display:table;">
              <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
              <input class="form-control" name="search" placeholder="Search Here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text">
            </div>
          </div>
        </form>

      </div>
    </div>
  </nav>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

I can't see anything wrong with the code. Adjusting the CSS margin in an attempt to fix the positioning is also ineffective.

Did you correctly import the CSS and all of the glyph fonts? — wrldbt, Jun 06 '16 at 19:38
@JackJamieson Yes, the CSS is imported correctly, as glyphicons appear elsewhere on the page. — Nse, Jun 06 '16 at 20:04

Gleb Kemarsky · Accepted Answer · 2016-06-06T21:22:11.630

UPD. I removed the first line <form runat="server"> and used the code

  <form class="navbar-form" role="search">
    <div class="form-group">
      <div class="input-group">

instead of

  <form class="navbar-form" style="padding-top:5px;">
    <div class="form-group" style="display:inline;margin-top:5px;">
      <div class="input-group" style="display:table;">

And I've added some CSS to make the form wider. Please check the result.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#navbar .navbar-form {
  overflow: hidden;
}
#navbar .form-group,
#navbar .input-group {
  width: 100%;
}
#navbar .input-group-addon {
  width: 39px;
}

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Crown Ent.</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">

      <ul class="nav navbar-nav navbar-left">
        <li role="presentation" id="dashboard"><a href="./">Dashboard</a></li>
        <li role="presentation" id="workorders"><a href="workorders.aspx">Work Orders</a></li>
        <li role="presentation" id="invoices"><a href="invoices.aspx">Invoices</a></li>
        <li role="presentation" id="accounts"><a href="accounts.aspx">Accounts</a></li>
        <li role="presentation" id="people"><a href="people.aspx">People</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a runat="server" href="~/admin">Settings</a></li>
        <li><a runat="server" href="~/admin">Help</a></li>
      </ul>

      <form class="navbar-form" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
            <input class="form-control" name="search" placeholder="Search Here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text">
          </div>
        </div>
      </form>

    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

That worked, thanks! The glyphicon appears and the search box is positioned correctly with one small caveat. The search box is at its default width. How do I get the search box to fill the length of the div element like in my original screenshot? — Nse, Jun 06 '16 at 20:55
@Nse I've added some CSS to make the form wider. And I removed `navbar-righ` from ` — Gleb Kemarsky, Jun 06 '16 at 21:11
@Nse Notice that the navbar has no space for the form when the screen width is between 768 and 991 pixels. You can add the `hidden-sm` class to your form. — Gleb Kemarsky, Jun 06 '16 at 21:30

score 0 · Answer 2 · answered Jun 06 '16 at 20:10

All you have to do is add the span that holds the search icon after the input field if you want it to be on the other side

So

<div class="input-group" style="display:table;">
     <input class="form-control" name="search" placeholder="Search Here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text">
     <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>

Also just looks like you need to apply a margin-top value to the input-group class feel free to add another class called search or something to apply it too as well

This seems like a simple css fix

FYI the glyph icon appears in all 3 of my browsers (Chrome, FF, and IE)

score 0 · Answer 3 · answered Jun 06 '16 at 20:11

0

in order to fix out of alignment problem change this:

<div class="form-group" style="display:inline;margin-top:5px;">

to this:

<div style="margin-top:5px;">

answered Jun 06 '16 at 20:11

Roozbeh

462
3
14

Bootstrap search field with icon in navigation header not appearing correctly

3 Answers3