Materialize CSS vertical align distorting width

Question

I am trying to make a searchbar in the middle of a page vertically and ofcourse horizontally.

For some reason when use the built in valign-wrapper it is distorting the width of the search bar.

Why is this happening? When i do not add the valign-wrapper class the width is ok but when i add it the width becomes very small.

Here is a snippet of what i am doing https://jsfiddle.net/4khz9jgp/3/

<div class="section search-section">
  <div class="valign-wrapper">
      <div class="row">
          <div class="col l8 push-l2 m8 push-m2 s10 push-s1">
              <div class="input-field">
                  <input id="icon_prefix" type="text" class="validate" placeholder="type in what you are looking for...">
              </div>
          </div>
      </div>
   </div>
</div>

Is there a way to override flex from valign-wrapper on the input field so that it does not take the minimum width possible?

Answer 1

How about you make the width: 100%; for the row div.

<div class="section search-section">
    <div class="valign-wrapper">
        <div id="thisOne" class="row">
            <div class="col l8 push-l2 m8 push-m2 s10 push-s1">
                <div class="input-field">
                    <input id="icon_prefix" type="text" class="validate" placeholder="type in what you are looking for...">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.search-section{
    min-height: 300px;
    height: 100%;
}
#thisOne{
    width:100%;
}