Materialize CSS Navbar Search is broken

Question

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

How do i fix this to make it look uniform?

Are you referring to the one on materializecss.com? Looks fine to me. — Max S., Apr 24 '16 at 16:13
What version of materializeCSS are you using? Post your current code to try and reproduce the error. Please learn how to post a useful question on stackOverflow here: http://stackoverflow.com/help/how-to-ask — CodeTrooper, Apr 24 '16 at 16:14

score 11 · Answer 1 · answered Apr 26 '16 at 20:57

11

I just noticed this today and I just did this:

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

answered Apr 26 '16 at 20:57

WeerdNoise

451
1
4
15

score 10 · Accepted Answer · answered Apr 25 '16 at 16:10

10

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%;
}

answered Apr 25 '16 at 16:10

mrtaz

446
1
6
16

thanks! this fixed it for me too though I went with a static px height .. for both my nav search bars -- one smaller one in the header and one larger one on the main page. funny I solved it and then remembered i should check the StackOverflow answers :) – sambehera Apr 26 '16 at 07:02
1

Awesome Happy Coding! – mrtaz Apr 26 '16 at 21:15

Materialize CSS Navbar Search is broken

2 Answers2