I need to create a search feature with a specific layout:
[Search Input (visible when search icon is clicked)] SearchIcon ClearIcon RefreshIcon
All arranged in a horizontal layout.
I have created a directive (called my-search) to combine the search input and icon, but for some undisclosed reasons, clear and refresh are not included in the directive.
Below is the HTML(template) for the directive with the search text and icon:
<div class="my-search">
<input class="search"
type="search"
placeholder="{{placeholder}}"
ng-model="model"
ng-change="onSearchTextChange(model)"
ng-show="click"
ng-init="click=false"
/>
<div class="circle main-icon" ng-click="click=true">
<div class="fa fa-search internal-icon"></div>
</div>
</div>
Here is the accompanying CSS:
.my-search {
float: left;
position: relative;
box-shadow: none;
height: 0;
}
.my-search .search{
float: left;
display: inline-block;
width: 25rem;
height: 3rem;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
box-shadow: none;
background-color:transparent ;
font-size: 1.8rem;
border-radius: 0;
position: relative;
}
.my-search .circle{
width: 3rem;
height: 3rem;
}
.my-search .main-icon{
float: right;
position: relative;
background-color:transparent ;
border: 2px solid #018BD3;
padding-top:5px !important;
left: -34px;
transition-delay: 0.5s;
}
.my-search .main-icon .internal-icon{
position: absolute;
color:#018BD3;
width: 3rem;
margin-top: 1px;
margin-left: 7px ;
}
The search input and icon are correctly aligned, but when I include clear and refresh icons along with the directive, they appear to the right of the text input (instead of next to the search icon) when the input is visible.
This is what I have attempted to achieve a horizontal layout with all four elements:
<div class="container">
<my-search> model="model" placeholder="placeholder" </my-search>
<div>
<div class="fa fa-bell"></div>
</div>
<div>
<div class="fa fa-bars"></div>
</div>
</div>
The problem arises when the input is displayed on the left, as both the bell (clear) and bar (refresh) divs are positioned to the right of the input instead of alongside the search icon.
.container{
float: right;
padding-right: 30px;
}
I suspect the issue lies in the resizing of the search div when the input is shown, causing the floating to adjust accordingly, rather than staying aligned with the search icon. Any suggestions on how I can resolve this?