I am having a problem with displaying adding my textAreaWithCountDown that has a div that display's a countdown. I am typing the code below sorry copy and paste is not possible so it may contain typos. Also, this is working when I use an anchor layout but I want this work with any layout, I am getting scrollbars in the TextArea for top and bottom and a white space after the div that is added. I do not want scroll bars unless they are needed and really it should only be a vertical scroll bar. Please help!

TextAreaCountDown = Ext.extend(Ext.form.TextArea),{

initComponent: function(){
this.suffix = ' of ' + this.maxLength + 'characters left';
this.instanceId = this.id + '-charsLeft';
this.addListener('render', this.buildCharactersRemaining, this);
TextAreaCountDown.superClass.initComponent.apply(this);
},
buildCharactersRemaining: function(){
this.reminder= {
width: this.width,
tag: 'div',
id: this.instanceId,
html: this.getCharsLeft() + suffix,
style: 'padding: 1px 1px 10px',
align:'right',
cls:'x-toolbar'
};
Ext.DomHelper.insertAfter(this.ex.this.reminder);
this.addListener('keyUp' this.valueChangeHandler, this);
this.addListener('change', this.valueChangeHandler, this);
},

getCharsLeft: function(){
return this.maxLength - this.getValue().length;
},
valueChangeHandler: function(){
charsLeft = this.getCharsLeft();
Ext.getDom(this.instanceId).innerHtml = charsLeft +this.suffix;
}
});