CODEWITHSUNDEEP
csshtmlmaterial-designfrontendmaterialize
sambehera
sambehera

Reputation: 968

Materialize CSS Navbar Search is broken

Navbar search is broken on chrome 50+ using either of these versions:

materialize 0.97.6 materialize 0.97.5

Code used is as described in the documentation:

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

this code leads to visual issues as depicted on the documentation page as well as my site:

http://materializecss.com/navbar.html

broken search

broken search on my site

How do i fix this to make it look uniform?

Upvotes: 11

Views: 7010

Answers (2)

WeerdNoise
WeerdNoise

Reputation: 450

I just noticed this today and I just did this:

input[type="search"] {
  height: 64px !important; /* or height of nav */
}

Upvotes: 11

mrtaz
mrtaz

Reputation: 444

Alright I was having the same issue. However, I added this CSS and it worked for me. 

nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}

Upvotes: 9

Related Questions