View Full Version : Gap in the textarea between the scroll bar and the border

4 Jun 2011, 11:46 AM
In the example form/field-types.html there is a gap, see the screenshot. This is because of the rule

.x-form-text, textarea.x-form-field {
background: url("../../resources/themes/images/default/form/text-bg.gif") repeat-x scroll 0 0 white;
border: 1px solid #B5B8C8;
padding: 1px 3px;


For the textarea, the padding should be

padding: 1px 0px 0px 1px;

in order the scroll bar to be positioned tightly

26 Jul 2011, 8:12 AM
I think padding config property is not read properly by TextArea.
Even if you set it to zero there are still gaps from left and right.

25 Sep 2012, 8:02 AM
I have tested this on 4.1.2
Basically this is default browser behaviour.
If you give a padding to <textarea> it will push the scrollbar on the right.
To get rid of this ugly padding you could override default ExtJS style:

textarea.x-form-field {
padding: 1px 3px;

textarea.x-form-field {
padding: 1px 0 1px 3px;

or have your own custom style.