I am currently working on a Bootstrap web page that features a list box filled with names and a search box for filtering through those names. The search box includes a glyphicon-remove button that becomes visible when text is typed in. Clicking the button clears the search box. However, I am facing an issue where the size of the search box shrinks when the icon appears, and I cannot determine the cause of this behavior.
Here is a visual representation:
https://i.sstatic.net/YOtus.png
This is how it should appear:
https://i.sstatic.net/YOtus.png
To resolve this issue, I could set a fixed width using CSS, but I prefer for it to adjust with the window like the rest of the form.
HTML:
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
CSS:
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}