Image causes misaligned content in table-cell - html

Question

I have an image icon inside my input, that's working fine.
The problem is that the icon is pushing my other input down. As you can see, after fade out, the input come back to desired position.
Is this a CSS issue? How can I solve this?
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: relative;
/* adjust as you need */
left: 190px;
bottom: 27px;
}
table {
border: 1px solid red;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>

Answer 1

Follow-up to my comment about just setting the background of the input...
.input-test {
background-image: url('https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png');
background-repeat: no-repeat;
background-position: 99% 48%;
background-size: 24px 24px;
}

Answer 2

basically, you can set the image position as absolute so that the wrapper will ignore the image height. Additionally, you have to set the wrapper position as relative so that the image position (bottom, and left) will depend on it's wrapper.
Last thing, just adjust the image position as you see fit.
I hope that makes sense for you
EDIT: to make it more clear, I only changed this much.
#input_img {
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table td {
position: relative;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table {
border: 1px solid red;
}
table td {
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>

Answer 3

In table-cell the default vertical alignment is middle, you can reset that by adding:
td {
vertical-align: top;
}
It would be better to set position: absolute; on the image, so it will be out of the normal content flow, and won't affect your standard layout, also easier to control the offsets.
td {
vertical-align: top;
position: relative;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
table {
border: 1px solid red;
}
td {
vertical-align: top;
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>

Answer 4

change this in your css should be work:
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
td {
vertical-align: top;
position: relative;
}