Blezx Blezx - 3 months ago 8
HTML Question

Animate parent div when an input is focused

I am trying to make it so when someone clicks on the input box it rises to the top of the screen. I am able to make this work but I can't the other content within the parent div to move with it. Here is what I have:



container{

}
input#search-bar:focus{
position: absolute;
border: 1px solid #008ABF;
transition: 0.35s ease;
color: #008ABF;
margin-top: -10px;
}

<div class="container">
<div class="brandHeader">
<h1>My Header</h1>
</div>
<form class="formHolder">
<input type="text" id="search-bar" placeholder="Search">
</form>
</div>





What I want is My Header to also move up 10px at the same time as the search bar.

If you need any additional information that I forget to provide please ask and I will post it.

Answer

A Pure CSS Solution - Flexbox Order

If you are able to restructure your html a little it's possible by changing the dom so input is 1st in the html but 2nd on screen. This method uses flexbox order to do so.

Here's an example.

css

.container {
  display: flex;
  flex-direction: column;
} 
input {
  display: flex;
  flex-direction: column;
  order: 2;
 }
.brandHeader {
  display: flex;
  order: 1;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
 margin-top: -10px;
}

html

<form class="container">
    <input type="text" id="search-bar" placeholder="Search">
    <div class="brandHeader">
      <h1>My Header</h1>
    </div>
</form>

fiddle

https://jsfiddle.net/Hastig/djj01x6e/

If that would work for you let me know and I'll explain more about it.

You can do a similar thing without flexbox using position: absolute to keep input 1st in dom but 2nd on screen but it too depends on your being able to change html structure.

Comments