Why does my searchbar appear in the worng location?

Question

After clicking the searchbar white space which should appear on the navbar.

However, it appears in the wrong place when using Chrome:

It looks properly on Firefox: (but then layout of site is looking weird, not like intended)

Here is my attempt so far:

<!-- Navbar.vue -->
<template>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper">
      <div class="row">
                <!-- Logo on the left -->
                <div class="col m2">
                    <a href="#" class="brand-logo">TabletopHaven</a>
                </div>
                
                <!-- Search bar in the center -->
                <div class="col m7">
                    <form>
                        <div class="input-field center-align">
                            <input id="search" type="search" required>
                            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                            <i class="material-icons">close</i>
                        </div>
                    </form>
                </div>

                <!-- Login button on the right -->
                <div class="col m3 right-align">
                    <a class="waves-effect waves-light btn">Register/Login</a>
                </div>
            </div>
    </div>
  </nav>
  
</template>

<script>
export default {
  name: 'MainNavbar',
}
</script>

<style scoped>
.nav-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    width:100%;
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

</style>

Here is fiddle code so you can check it (it looks a little different): https://jsfiddle.net/Lxbwv5yq/

Answer 1

I found out how to solve this.

Basically you need to change the height of searchbar because it is too big and it's overlapping to other containers