Materialize: Getting Search + Buttons in navigation bar

[KrisSiegel]

I'm trying to find a way to make the navigation bar entirely a search box except for 1-2 buttons on the very right. Right now I can get the icon buttons to show up on the same row but the search box is really tiny (I want to fill all space except for the space occupied by the right button(s)).

Is there a built-in way to do this in materialize that I'm missing or do I need to do some CSS overriding? Which the latter is fine but I wanted to ask to see if I'm missing anything obvious.

Here is some code I'm playing with:

<nav>
    <div class="nav-wrapper">
        <ul class="right">
            <li><a href="#"><i class="mdi mdi-close"></i></a></li>
        </ul>
        <form class="left">
            <div class="input-field">
                <input id="search" type="search" />
                <label for="search"><i class="mdi mdi-magnify"></i></label>
            </div>
        </form>

    </div>
</nav>

[ahlechandre]

maybe

<nav>
  <div class="nav-wrapper">
    <div class="row">
      <div class="col s10">
        <form>
          <div class="input-field">
            <input id="search" type="search" />
            <label for="search"><i class="material-icons">search</i></label>
          </div>
        </form>
      </div>
      <div class="col s2">
        <ul class="right">
          <li><a href="#"><i class="material-icons">close</i></a></li>
          <li><a href="#"><i class="material-icons">link</i></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

[KrisSiegel]

Oh. Not sure why I didn't think of using the grid. Ugh, thanks. I'll try that tonight.

[KrisSiegel]

There is a slight bit of padding but otherwise this is good. I can go from here; thanks!

[ahlechandre]

yeah this is also my trouble

[ondrejkolin]

This solution is not working on
Google Chrome 52.0.2743.82

[VicFrolov]

Yep, I can confirm this solution breaks on chrome

[ferbispojesus]

Solution ->

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

[chahat]

Thanks for the code snippet, I used this and also added close icon to my search-form but close icon never shows up.. Any work arounds?

[Inamacio]

I had this same problem of stylizing the search bar in the navalize of materialize, I got the code snippet from friend @ahlechandre ahlechandre and I modified it to stay as I wanted, follow the code.