My grid layout is causing some issues with the search box placement. Whenever a user starts typing in the input box, it jumps to the other side of the page. After investigating, I realized that the culprit is the position: absolute property. Oddly enough, this problem only occurs in Chrome. What could be causing this issue in my CSS?
CSS:
header {
display: grid;
grid-template-columns: 15% 50% 30% 5%;
height: 40px;
width: auto;
/*border: 1px solid red;*/
margin-left: 26.5%;
margin-right: 50px;
margin-top: 35px;
position: relative;
}
header input {
grid-column-start: 3;
margin-top: 2px;
margin-bottom: 2px;
}
.searchStyle {
border: none;
background-color: transparent;
width: 75px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
position: absolute;
right: 60px;
top: 21%;
}
.searchStyle:focus {
width: 200px;
border-bottom: 1px solid #BA9765;
outline: none;
}
HTML:
<header>
[other code]
<input class="searchStyle" type="text" placeholder="SEARCH…" id="search-bar" />
[other code]
</header>