I am looking to create a search bar similar to the one on this website: .
I attempted to do so using the following code: (Here's a codepen)
HTML:
<div class="col-md-4 d-flex justify-content-end all-buttons">
<div class="col-md-4 d-flex justify-content-end search-bar">
<a nbButton outline class="text-decoration-none add-btn" id="add-btn-hide" >
<i class="nb-plus fa-1x"> </i> Add User
</a>
<button nbButton class=" multi-delete-btn" id="delete-btn-hide" >
<i class="nb-trash fa-2x"></i>
Delete All
</button>
<input type="text" class="search-input" id="search-input" fullWidth nbInput placeholder="Enter Search" (keyup)="onKey($event)" />
<button nbButton class="search-btn" nbTooltip="Quick Search " nbTooltipPlacement="top" status="primary">
<!-- <nb-icon icon="search-outline"></nb-icon> -->icon
</button>
</div>
</div>
CSS:
body{
margin:40px;
}
.all-buttons {
height: 30px;
padding-right: 0;
}
.info-btn {
padding: 0.4rem;
border-radius: 0.25rem;
margin-right: 3px;
background-color: blue;
border-color: blue;
}
.advanced-filters {
background-color: green;
padding: 0.6rem 0 0 0;
border-radius: 0.5rem;
margin-left: 1px;
}
.multi-delete-btn {
margin: 0 8px 0 3px;
color:white;
background-color: orange;
border-color:orange;
border-radius: 0.25rem ;
padding: 0 5px 0 0 ;
opacity: 1 !important;
transition: width 0.5s ease-out;
}
.add-btn {
border-color:blue ;
background-color: blue ;
color: white;
padding: 0.5rem;
border-radius: 0.25rem;
margin: 0 ;
opacity: 1 !important;
transition: width 0.5s ease-out;
}
.search-bar {
border: none !important;
margin-right: 2px !important;
border-radius: 100px ;
min-width: 33px !important;
position: relative;
transition: width 0.5s ease-out;
}
.search-input {
background: transparent;
border: 0;
background-color: lightblue;
opacity: 0;
width:40px !important;
transition: width 0.5s ease-out;
&:focus {
outline: 0;
}
}
.search-btn {
cursor: pointer;
border: 2px solid blue;
border-radius: 0.25rem !important;
background: transparent;
margin: 0 !important;
position: absolute ;
top:0 ;
bottom:0;
right: 0;
}
.search-bar:focus-within{
width:50% !important;
border: 2px solid brown !important;
.search-input{
width: 100% !important ;
background-color: rgba(196, 158, 233, 0.205);
color: black !important;
cursor: initial ;
opacity: 1;
}
.add-btn{
display: none !important;
}
.multi-delete-btn{
display: none!important;
}
}
The problem:
After clicking outside of the search icon, the "Add" button and "Delete-all" button should appear. However, in my case, they are only moving. (When I click the search icon, the add-button and delete-all button disappear – which is correct)