I've been working on an AutoComplete feature and I've hit a roadblock. I'm trying to make the suggestions slide down into view with a smooth animation using CSS transform: translateY. The problem is that when the suggestions list is taller than the textbox, it doesn't fully hide behind it, clipping out of the top.
To illustrate the issue, I've set up a demo at this link and included the code below (try typing in the textbox):
document.querySelector(".autocomplete").oninput = e => {
let value = e.target.value;
if (value.length > 0) {
document.querySelector(".suggestions").classList.add("open");
} else {
document.querySelector(".suggestions").classList.remove("open");
}
}.autocomplete {
border: 1px solid #ddd;
padding: 5px;
width: 500px;
background-color: yellow;
z-index: 1;
position: relative;
}
.suggestions {
border: 1px solid #ddd;
height: 125px;
width: 500px;
transform: translateY(-30px);
transition: .25s;
background-color: #eef;
}
.open {
transform: translateY(0);
}<p>Some text and a paragraph preceding the autocomplete</p>
<div>
<input class="autocomplete" />
<div class="suggestions">apple, banana, carrot, dog</div>
</div>I'd like to change the transform: translateY(-30px); to transform: translateY(-130px); to have the suggestions hide completely behind the textbox. However, simply altering the value causes clipping issues. Additionally, I can't use scale because it distorts the appearance during animation.
While adding extra elements before the AutoComplete as a temporary fix may work, it's not a scalable solution for different application states. Is there another approach I can take to achieve the desired effect?
Thank you.