Right Aligned Italic Text in textbox cut off

Question

I have a few textboxes that are read-only. I've made that text italic but for numeric fields where I've also right aligned the text the last number gets cut off. Adding padding only makes the textbox larger but doesn't fix the issue as you can see in the image (Total Cost has about 20px padding and Cost only has 5px). How can i fix this other than just getting rid of the italic text? I've searched and haven't found anything addressing this so if you have a link somewhere i'd be happy to check it out.

This isn't browser specific so it happens across the board , Chrome is the one used for the image above and has the most noticeable change. When the page first loads it is displayed correctly, nothing cut off. This is part of a form, so once you chose another option from a dropdown the text within these read-only boxes changes, that's when the issue takes place. Almost as if it was changing the styling when a new option was chosen. I haven't noticed any style changes, nor class changes or anything in the code. Could be overlooking something but nothing has stood out so far.

Here is a jsFiddle: jsfiddle.net/mK6JK

This isn't fully styled the same as the issue but has the main styling classes added. Problem is that it looks fine on the fiddle. But still has the issue on my production version.

Answer 1

You must add padding to the right side of the textbox.

<input type="text" class="classnum" />

And add CSS rule:

.classnum {
    text-align: right;
    font-style: italic;
    padding-right: 3px;
}

Answer 2

Please look into the below html & css. I am not getting any type of issue in any browser. Html

<input type="text" class="italic" value="1236" />

Css

.italic{
    font-style:italic;
    padding: 10px;
    text-align: right;
}

http://jsfiddle.net/SqX75/

Answer 3

i had a similar problem but with <div> content. i just added width: 110% and it solved my problem. hope it'll be useful for somebody else.

Answer 4

As far as I can tell, this is dependent on the browser and there isn't really a way to make it go away. The input field is a replaced element and the way it looks and behaves is affected by your OS+browser combination.

One possible work-around is to set the letter-spacing property on the input element to about 2 or 3px. This will of course space out all characters. Depending on your font and design, this might not look that awful

What I ended up doing was to ensure a space was always added at the end via Javascript, when the field changed.