How To Make Image Align With Input Element

Update after implementing the code adding its on div How can I make the image sit next to City input element? HTML Code:

Solution 1:

Add this to your style:

.form-group {
  positon: relative;
}
.remove-action {
  position: absolute;
  top: 0px;
  right: -4px;
}

Solution 2:

.input-has-icon {
  position: relative;
  width: 100%;
}
.input-has-icon.form-control {
  padding-right: 30px;
}
.input-has-icon.action-image,
.icon-after-input.action-image {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
}
.icon-after-input {
  padding-right: 30px;
  position: relative;
}
.icon-after-input.action-image {}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><divclass="col-sm-12"id="assetList"><divclass="col-sm-6"style="width:45% !important;"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2 control-label">Name</label><divclass="col-sm-4"><inputtype="text"class="form-control"id="Name"placeholder="Name"></div></div></div><divclass="col-sm-6"style="width:35% !important;"><divclass="form-group "><labelfor="inputEmail3"class="col-sm-2 control-label">City</label><divclass="col-sm-4"><divclass="input-has-icon"><inputtype="text"class="form-control"id="City"placeholder="City"><aclass="action-image remove-action"href="javascript:void(0);"><imgalt="Remove"title="Remove"src="https://cdn3.iconfinder.com/data/icons/musthave/16/Delete.png"></a></div></div></div></div></div><hr><divclass="col-sm-12"id="assetList"><divclass="col-sm-6"style="width:45% !important;"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2 control-label">Name</label><divclass="col-sm-4"><inputtype="text"class="form-control"id="Name"placeholder="Name"></div></div></div><divclass="col-sm-6"style="width:35% !important;"><divclass="form-group "><labelfor="inputEmail3"class="col-sm-2 control-label">City</label><divclass="col-sm-4"><divclass="icon-after-input"><inputtype="text"class="form-control"id="City"placeholder="City"><aclass="action-image remove-action"href="javascript:void(0);"><imgalt="Remove"title="Remove"src="https://cdn3.iconfinder.com/data/icons/musthave/16/Delete.png"></a></div></div></div></div></div>

Add an extra div before your input tag and style it this way.

Solution 3:

Of course you have to see it in full page to see the effect

.input-wrapper {
  position:relative;  
}

.remove-action {
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><divclass="col-sm-12"id="assetList"><divclass="col-sm-6"style="width: 45% !important;"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2 control-label">Name</label><divclass="col-sm-4"><inputtype="text"class="form-control"id="Name"placeholder="Name"></div></div></div><divclass="col-sm-6"style="width: 35% !important;"><divclass="form-group "><labelfor="inputEmail3"class="col-sm-2 control-label">City</label><divclass="col-sm-4"><divclass="input-wrapper"><inputtype="text"class="form-control"id="City"placeholder="City"><aclass="action-image remove-action"href="javascript:void(0);"><imgalt="Remove"title="Remove"src="https://cdn2.iconfinder.com/data/icons/diagona/icon/16/101.png"></a></div></div></div></div></div>

Update

To make the x icon in the middle of the input, you need to wrap the input with .input-wrapper with position:relative;.

The trick is to use (for the icon):

top:50%;
transform:translateY(-50%);

Share