Материализация CSS вертикальное выравнивание искажающая ширина

Question

Я пытаюсь сделать панель поиска в середине страницы по вертикали и по горизонтали.

По какой-то причине при использовании встроенной оболочки valign-искажений ширина панели поиска искажается.

Почему это происходит?Когда я не добавляю класс valign-wrapper, ширина в порядке, но когда я его добавляю, ширина становится очень маленькой.

Вот фрагмент того, что я делаю 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>

Есть ли способ переопределить flex из valign-wrapper в поле ввода, чтобы он не занимал минимально возможную ширину?

Answer 1

Как насчет сделать width: 100%; для row дел.

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

Answer 2

Это потому, что valign-wrapper имеет display: flex;имущество.Это означает, что ввод будет занимать минимально необходимое пространство.

Может быть, вы можете создать другой класс для центрирования ввода, например:

.center {
 position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}

Надеюсь, это поможет:)