I am facing an issue with a search box that expands when activated. However, I want the search box to break out of the Bootstrap column and overflow other content on the page. How can I achieve this?
Here is the CSS code for the search box styling:
.search-area {
transition: all .3s ease-in;
width: 3rem
}
.search-area:focus-within,
.search-area:hover {
width: 100%;
}
.page-searchform {
position: relative
}
.header-search {
padding-right: 2rem;
border: 0;
background-color: #fff;
}
.header-search-btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
/* Presentation only */
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
padding: 10px;
border: 1px solid #ccc;
}Here is the HTML code for the search box within the Bootstrap column:
<div class="container">
<div class="row">
<div class="col col-10">
Column 1 - Make search input overflow me!
</div>
<div class="col d-flex justify-content-end align-self-center">
<div class="search-area">
<form class="page-searchform" action="" method="get">
<label for="headerSearch" class="visually-hidden"></label>
<input name="" id="headerSearch" class="header-search form-control" type="search" placeholder="Search...">
<button class="btn header-search-btn" type="submit" id="headerSearchBtn">Go
</button>
</form>
</div>
</div>
</div>
</div>You can view the JsFiddle here for more details.