CODEWITHSUNDEEP
twitter-bootstrap
Craig
Craig

Reputation: 18694

Spinning icon, next to edit box

I am trying to create an edit box, and next to it, a small spinner, that when finished, will show based on a button click, indicating 'busy'.

The edit box AND the icon, should use 100% of the containers width (col-xs-12).

However, with my current code, the icon goes on a new line, with the edit box spanning 100%. Is this possible with Bootstrap?

<div class="well well-sm shadow">
    <div class="row">
        <div class="col-xs-12">
            <input type="search" onkeyup="doSearch(this.value)" class="form-control" /><img src="~/images/loader.gif" />
        </div>
        <div class="col-md-12 col-xs-12 col-sm-4 SearchResultsBox text-right">
            <button class="btn btn-sm btn-info" onclick="ViewSearchResult()">View</button>
        </div>
    </div>
</div>

Upvotes: 1

Views: 78

Answers (1)

Farhad Manafi
Farhad Manafi

Reputation: 334

        <div class="well well-sm shadow">
        <div class="row">
            <div class="col-xs-12">
                <input type="search" onkeyup="doSearch(this.value)" class="form-control" /><img src="http://www.andrewdavidson.com/articles/spinning-wait-icons/wait24.gif" style="left:10px; position:absolute; z-index:1000;" />
            </div>
            <div class="col-md-12 col-xs-12 col-sm-4 SearchResultsBox text-right">
                <button class="btn btn-sm btn-info" onclick="ViewSearchResult()">View</button>
            </div>
        </div>
    </div>

Upvotes: 3

Related Questions