form{
min-height: 50vh;
transition: all 0.7s linear;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border: 0 2px 0 0 solid black;
width: 20rem;
padding: 10%;
margin:auto;
flex-wrap: wrap;
position: relative;
background-color: #e9ac67;
position: relative;
}
input{
height: 2rem;
border: 2px solid black;
}
label{
text-transform: capitalize;
}
.sug-city{
list-style: none;
font-size: 0.5rem;
}
ul{
list-style: none;
}
li{
border: black 2px solid;
margin:0
}
Whenever the suggestion list appears, the height increases(which was expected), but the position of the form also changes. I want the height to grow vertically downwards and not upwards. Think of how Google's search bar works. That's the end result I want.
ul {
max-height: 250px;
overflow-y: scroll;
}
You put your listelement inside the same container - so expanding the list would also expand everything.
You can put your listelement outside and/or give it an absolute position. Minimal changes can be found here: codepen
Basically I wrapped the inputfield in a relative-positioned wrapper to keep that position; then I changed ul to position:absolute.
This behaviour is because your body's display:flex and you have applied justify-content:space-evenly. Which automatically adjust the available space between elements. When the suggestions' list appears, it increases the size of your select element and occupies more space on the screen which eventually appears to move upwards.
Modify you CSS like this, this will solve your problem.
body {
display: flex;
flex-direction: column;
align-items: center;
position: relative; //So you can specify childrens' absolute position
min-height: 100vh;font-family: 'Urbanist', sans-serif;
text-transform: uppercase;
font-size: 1.3rem;
background-image: linear-gradient(to left top, #051937, #4d295a, #983461, #d2524d, #e98c27);
}
form {
min-height: 50vh;
transition: all 0.7s linear;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border: 0 2px 0 0 solid black;
width: 20rem;
padding: 10%;
margin:auto;
flex-wrap: wrap;
background-color: #e9ac67;
}
header {
margin-top: 50px;
}
main {
position: relative;
top: 50px;
}