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

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 2

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;
}