CODEWITHSUNDEEP
htmlcssinternet-explorer
ayakashi-ya
ayakashi-ya

Reputation: 291

padding-top inside input field in ie

How do I correct paddings (in this case padding-top) inside input fields in IE?

So, I want to make a text field, ie. a search text field. This field has an search icon in the left side and the inputted text next to it, separated by a vertical line.

When the field is in :focus, I want show a tooltip saying: ie. "input text here". This text is inside the field and take about a third of the field's height.

So, when in focus i want to push down the inputted text in the field down by a third of the field's height, so i can show both the tooltip and the inputted text without having them overlapping each other.

I managed to do this with only CSS, and it works correctly in every browser but IE.

In IE, the inputted text was pushed down too much, so the bottom half of the text was missing because it was overflowing.

sample: http://codepen.io/ayakashi/pen/emZVed

My Code: (CSS)

.form-2 label{
  /*positioning icon in the left side of the text field*/
  position:absolute;
  padding: 0.5em 0;
  text-align:center;
  left:0;
  color: rgba(0,0,0,0.6);
  border-right: solid 1px rgba(0,0,0,0.1);
  width: 2.5em;
}

.form-2 .tooltip{
  font-size: 0.714em; /*10px*/
  text-align:left;
  padding-left: 1em;
  font-family:Calibri, Helvetica, sans-serif;
  font-weight:bold;
  color:white;
  width:21.7em;

  /*positioning tooltip in top of text field*/
  position:absolute;
  border-radius: 0 0.5em 0 0;
  margin-left: 3.5em;
  top:-0.5em;
}

input:focus{
  padding-top:1em;
}

input:focus, input:focus + .tooltip{
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
}

HTML

<form role="form" class="form-2">
    <div>         
      <label for="exampleInputEmail1"><i class="fa fa-user fa-lg"></i></label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      <p class="tooltip">Username / Email address</p>
    </div>
</form>

Upvotes: 0

Views: 1854

Answers (2)

ayakashi-ya
ayakashi-ya

Reputation: 291

I managed to find the solution for my problem (tested in CrossBrowserTesting.com using IE9 and IE10) :)

I've just noticed that IE9 and IE10 had a white space at the bottom of the input field that eat up the bottom half of the inputted text, when comparing the result between IE9, IE10, and IE11.

So I added padding-bottom: 0 in input:focus style to remove that space.

And it works. The inputted text appear correctly now. The padding-bottom:0 doesn't seem to affect other browser, since they still show the result correctly.

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

Identifying line-height appears to solve it for IE9:

.form-2 input{
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
  padding-left: 3em;
  border-radius: 0.5em;
  line-height: 1.1em;
}

http://codepen.io/anon/pen/RNaQxY

Upvotes: 1

Related Questions