CODEWITHSUNDEEP
javascripthtmlcss
Shahid Alam
Shahid Alam

Reputation: 41

Prevent change in position of div with height increase

codepen

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.

Upvotes: 0

Views: 742

Answers (4)

Mohammad E.F
Mohammad E.F

Reputation: 64

it is better use another Units for declaring height. "vh" unit can make some problems specially in mobile devices.

 and also use 
 ul{
   overflow-y: scroll;
 }

Upvotes: 0

rajabraza
rajabraza

Reputation: 363

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

Upvotes: 1

coyer
coyer

Reputation: 4367

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.

Upvotes: 1

imspid3y
imspid3y

Reputation: 11

Try This

ul {
    max-height: 250px;
    overflow-y: scroll;
}

Upvotes: 1

Related Questions