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 {}

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


        </div>
      </div>
    </div>
  </div>
</div>
<hr>

<div class="col-sm-12" id="assetList">
  <div class="col-sm-6" style="width:45% !important;">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="Name" placeholder="Name">
      </div>
    </div>
  </div>
  <div class="col-sm-6" style="width:35% !important;">
    <div class="form-group ">
      <label for="inputEmail3" class="col-sm-2 control-label">City</label>
      <div class="col-sm-4">
        <div class="icon-after-input">
          <input type="text" class="form-control" id="City" placeholder="City">
          <a class="action-image remove-action" href="javascript:void(0);">
            <img alt="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%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-12" id="assetList">
    <div class="col-sm-6" style="width: 45% !important;">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="Name" placeholder="Name">
            </div>
        </div>
    </div>
    <div class="col-sm-6" style="width: 35% !important;">
        <div class="form-group ">
            <label for="inputEmail3" class="col-sm-2 control-label">City</label>
            <div class="col-sm-4">
              <div class="input-wrapper">
                <input type="text" class="form-control" id="City" placeholder="City">
                <a class="action-image remove-action" href="javascript:void(0);">
                    <img alt="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