css - how to make an expandable input field to push other div when its expanded

Question

I m trying to make an expandable input field to push other div when its expanded. So far its only covering the div which it supposed to push. Any ideas how to achieve that with css ?

input[type="text"] {
  border-radius: 0;
  height: 24px;
  line-height: 24px;
  outline: none;
  position: absolute;
  right: 10rem;
  top: 5rem;
  -webkit-transition: width 15ms ease;
  -moz-transition: width 15ms ease;
  -o-transition: width 15ms ease;
  -ms-transition: width 15ms ease;
  transition: width 2s ease;
  width: 10%;
}
input[type="text"]:focus {
  width: 30%;
}
.div-to-pushed {
  height: 28px;
  width: 10%;
  border: 1px solid black;
  position: relative;
  top: 72px;
  left: 300px;
}

https://stackblitz.com/edit/angular-ph3dmv?embed=1&file=src/app/app.component.ts

标签： cssangularsass

Answer 1

The issue is your input element is position absolute which takes it out of document flow. remove the position absolute and remove top and left positioning on both elements.

add justify-content: flex-end to the parent container;

Code Example:

.parent {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

div {    
    height: 28px;
    width: 10%;
    border: 1px solid black;
    position: relative; 
   }
input {border-radius: 0;
    height: 24px;
    line-height: 24px;
    outline: none;
    transition: width 2s ease;
    width: 10%;
}