CODEWITHSUNDEEP
htmltwitter-bootstrap-3
richardgir
richardgir

Reputation: 53

How to add in input form button cancel

I would like to do something like this. enter image description here

but i dont know how to do it in Bootstrap correctly

Here's my html code where i get only like this.enter image description here

<form class="navbar-form" role="search">
<div class="input-group add-on">
<input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text">
<button class="btn btn-default" type="submit" (click)="clear()"><i class="glyphicon glyphicon-remove"></i></button>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" (click)="search()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>

Upvotes: 1

Views: 1682

Answers (2)

Evochrome
Evochrome

Reputation: 1215

I honestly think that buttons are a pain in the butt and are outdated. I much rather use a simple div, a or in this case i tag.

Therefore this might not be completely what OP asked for but in my eyes it is a more elegant solution.

The secret to this solution is using the flex property to the wrapper, which makes it possible to automatically size its children within its space.

.field {
  display: flex;
  position: relative;
  max-width: 285px;
  min-width: 200px;
  width: 100%;
  flex-direction: row;
}

Please check out the snippet for a more specific example. This works in all modern browsers and from internet explorer 10.

var input = document.getElementById("search");

function clearInput() {
  input.value = "";
}

function search () {
  console.log("searching");
  // Implement search function here...
}
.field {
    display: flex;
    position: relative;
    max-width: 285px;
    min-width: 200px;
    width: 100%;
    flex-direction: row;
}

.field > input[type=text] {
    flex: 1;
    padding: 0.6em 0.6em 0.6em 1.5em;
    border: 1px solid #c4c4c4;
    border-right: none;
    display: block;
}

.field > div {
    padding: 0.4em 0;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    border-left: none;
    border-radius: 1px;
    display: inline-block;
    cursor: pointer;
}

.field > div > i {
    padding: 0.2em 0.8em;
    background-color: inherit;
    color: #555555;
    border: none;
    border-left: 1px solid #c4c4c4;
    margin-right: 1px;
}

.field > div:last-child > i {
  border-left: none;
}

.field > div:hover > i {
  color: #009BDB;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="field">
	<input type="text" id="search" placeholder="Search..." />
	<div>
    <i class="fa fa-times" onclick="clearInput()"></i>
	</div>
	<div>
    <i class="fa fa-search" onclick="search()"></i>
	</div>
</div>

Upvotes: 2

T. H.
T. H.

Reputation: 79

You could play around with position: relative,

for example:

html:

<form class="navbar-form" role="search">
    <div class="input-group add-on">
        <input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text">
        <button class="btn btn-default test" type="submit" (click)="clear()"><i class="glyphicon glyphicon-remove"></i></button>
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit" (click)="search()"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
</form>

css:

.form-control {
  position:relative;
}
.test {
  position:relative;
  right:20px;
}

example jsfiddle: https://jsfiddle.net/DTcHh/92025/

Upvotes: 2

Related Questions