I am trying to overlay the x icon on my grey textbox, while maintaining it's 100% width. Is this possible? And if so, how? Up until this stage, all I can do is get it to work if the width of the grey textbox is 90%.
HTML
<div class="container" id="waypoints-page">
<div id="waypoints">
<div class="waypoint-container">
<input type="text" class="form-control booking waypoint" placeholder="Via" id="first-waypoint">
<label><i class="fa fa-times" id="clear-waypoint-button"></i></label>
<hr>
</div>
</div>
</div>
CSS
.booking {
outline: none;
border: none;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
background-color: #ccc;
}
input.form-control.booking, .twitter-typeahead {
width:100%;
display: inline-block;
}
.tt-dropdown-menu {
padding: 1em;
background-color: #ccc;
width: 100%;
Well, you can position it absolutely.
.container {
position: relative;
}
.fa {
position:absolute;
top: 8px;
right: 25px
}
See Fiddle.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments