Place icon and fix its position inside input control of dynamic width using CSS

Question

I have a dynamic input control whose width changes as per business conditions. The input control is inside a table. Inside the input control is a calendar icon (glyphicon), whose margin should also change as per the conditions. It should support responsiveness also. Right now as the input control's width changes, the calendar's position changes and it does not stay in one position. Sometimes's it is inside the input control in the very middle and sometimes its way outside it. Basically, the calendar must be at a dedicated place irrespective of the input control's width.

Right now the code is as such that it works well for 1900x1200 and 1366x768. But it does not work for other resolutions and certain devices. Media query seems to go off in some scenarios. Is there a way that we can fix the calendar position inside the input control and to the extreme right without media query. Jquery/CSS solution will do as long as I do not have to fix the margin-right property of the calendar icon for every resolution.

Here is the Demo

Below is the code snippet

input.c-text-field[type=text], input[type=email] {
    display: block;
    width: 276px;
    height: 36px;
    margin-top: 20px;
    padding: 7px 10px;
    border: 1px solid rgba(0,0,0,.6);
    outline: 0;
    background: #FFF;
}
.glyphicon {
    float: right;
    width: 36px;
    margin-right: 5px;
    margin-bottom: -36px;
    color: #0379d3!important;
}
.glyphicon-calendar {
    pointer-events: none;
    margin-top:20px;
}
.glyphicon-calendar:after {
    font-family: MWF-MDL2;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E787";
    display: block;
    font-size: 26px;
    height: 36px;
    line-height: 36px;
    text-align: right;
}
.c-checkbox label.c-label, input.c-text-field[type=text], table .c-checkbox label.c-label {
    margin-top: 0;
}

<link rel="stylesheet" href="//assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.15.0/css/mwf-west-european-default.min.css">
<table>
<tbody>
  <tr>
    <td>
    <!-- I do not want to put margin-right hardcoded like this. It should come dynamically or fix with other CSS properties -->
      <i class="glyphicon glyphicon-calendar" style="margin-right:15%;"></i> 
<input value="04/29/2018 12:00 AM" class="sfr-ip-start-date c-text-field Control x-hidden-focus" id="StartDate1" type="text" style="cursor: pointer;width:250px;font-size:13px">     
    </td>
    <td>
    <!-- I do not want to put margin-right hardcoded like this. It should come dynamically or fix with other CSS properties -->
      <i class="glyphicon glyphicon-calendar" style="margin-right:20%;"></i> 
<input value="04/29/2018 12:00 AM" class="sfr-ip-start-date c-text-field Control" id="StartDate2" type="text" style="cursor: pointer;width:170px;font-size:13px">                             
    </td>
  </tr>
</tbody>
</table>

Any help will be appreciated. Thanks!

https://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box Possibly this can help . — xxCodexx, Apr 02 '18 at 12:30

Carr · Accepted Answer · 2018-04-02T12:46:28.413

By adding position: relative property to td which is parent of .glyphicon, and positioned icon in absoulte property, so the .glyphicon are confined within the td. We don't need margin-right anymore, so I remove all of them. Set right property to decide how far is the .glyphicon to the right side of td. jsfiddle

td {
  position: relative;
}

input.c-text-field[type=text],
input[type=email] {
  display: block;
  width: 276px;
  height: 36px;
  margin-top: 20px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, .6);
  outline: 0;
  background: #FFF;
}

.glyphicon {
  position: absolute;
  right: 5px;
  width: 36px;
  color: #0379d3!important;
}

.glyphicon-calendar {
  pointer-events: none;
  margin-top: 20px;
}

.glyphicon-calendar:after {
  font-family: MWF-MDL2;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E787";
  display: block;
  font-size: 26px;
  height: 36px;
  line-height: 36px;
  text-align: right;
}

.c-checkbox label.c-label,
input.c-text-field[type=text],
table .c-checkbox label.c-label {
  margin-top: 0;
}

<link rel="stylesheet" href="//assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.15.0/css/mwf-west-european-default.min.css">
<table>
  <tbody>
    <tr>
      <td>
        <!-- I do not want to put margin-right hardcoded like this. It should come dynamically or fix with other CSS properties -->
        <i class="glyphicon glyphicon-calendar"></i>
        <input value="04/29/2018 12:00 AM" class="sfr-ip-start-date c-text-field Control x-hidden-focus" id="StartDate1" type="text" style="cursor: pointer;width:250px;font-size:13px">
      </td>
      <td>
        <!-- I do not want to put margin-right hardcoded like this. It should come dynamically or fix with other CSS properties -->
        <i class="glyphicon glyphicon-calendar"></i>
        <input value="04/29/2018 12:00 AM" class="sfr-ip-start-date c-text-field Control" id="StartDate2" type="text" style="cursor: pointer;width:170px;font-size:13px">
      </td>
    </tr>
  </tbody>
</table>

Place icon and fix its position inside input control of dynamic width using CSS

1 Answers1