CODEWITHSUNDEEP
cssinternet-explorer-10
Strange Klitgaard
Strange Klitgaard

Reputation: 101

IE10 removes padding on input with right alignment

I've come across some IE10 wierdness regarding padding in a right aligned inputfield.

Check this fiddle http://jsfiddle.net/fhWhn/

::-ms-clear, ::-ms-clear{
    display: none;
}

This removes the "IE10 icons" but what do I do if I want to keep these and keep my padding? Is there another, smarter, way of keeping the padding after onblur?

Upvotes: 10

Views: 5362

Answers (5)

Tom Carver
Tom Carver

Reputation: 1018

Edit: Eric's solution worked for me and is much nicer, but I'm leaving this answer here in case some future version of IE needs a different fix

New IE, New IE-specific rendering issues...

I've been debugging the same behaviour. The only thing I've found that works so far is:

  1. Removing focus from the input (even explicitly setting the “padding-right” per element has no effect while it has focus)
  2. Setting the padding-right value to a different value to the correct value (setting it to the correct value triggers no change, presumably because the layout system knows the computed CSS value hasn’t changed so decides no re-draw is necessary)
  3. Waiting for a re-draw (instantly – or even after a timeout of 1 or 2 milliseconds - setting the property again to the correct value results in no change, presumably because no re-draw has taken place as per above)
  4. Setting the property to the correct value (e.g. using $this.css("padding-right", ""), which removes any per-element value and allows the computed CSS value to take over).

However this is of course undesirable as it involves removing focus from the input when the user may be in the middle of typing.

Upvotes: 0

Lluz Mar
Lluz Mar

Reputation: 1

JustinStolle's answer is the best approach, I think.

Example:

input[type="text"].field-al-right{
    text-align:right;
    direction:rtl;
}

Upvotes: 0

JustinStolle
JustinStolle

Reputation: 4410

A possible workaround is to use the style direction: rtl; on your input, which will move the × to the left-hand side of the element. However, the behavior of using right-to-left may not be ideal for your case.

Upvotes: 5

Eric
Eric

Reputation: 3334

I ran in to this same problem. To get padding back, just set the value of the textbox on blur.

My simple solution:

$("input[type='text']").blur(function (evt){
    var $element = $(this);
    $element.val($element.val());
});

Upvotes: 5

Louis
Louis

Reputation: 1084

have you try adding 'box-sizing' to your css?

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

Upvotes: -1

Related Questions