Vertical Scrollbar is not visible in IE 11 for textarea

Question

I have on TextArea and in that I have given a vertical scrollbar, My textarea is readonly. But what i noticed here is my scrollbar is not visible in IE11. Top and bottom arrow is coming but scroll bar is not coming.

My Code :

Ext.create('Ext.form.FormPanel', {
    title      : 'Sample TextArea',
    width      : 400,
    bodyPadding: 10,
    renderTo   : Ext.getBody(),
    items: [{
        xtype     : 'textareafield',
        grow      : true,
        name      : 'message',
        fieldLabel: 'Message',
       /* disabled : true,*/
       readOnly : true,
        value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
        anchor    : '100%'
    }]
});

When I run this into fiddler in IE11 I'm not able to see scroll. I attach the screenshot.

Any suggestion or help.

Answer 1

That is just IE being IE ... if you provide specific height (like in this case I did with 100 ) to that textarea IE will show the scrollbar ... it is just by default ugly looking one with two big arrows:

Ext.create('Ext.form.FormPanel', {
title      : 'Sample TextArea',
width      : 400,
bodyPadding: 10,
renderTo   : Ext.getBody(),
items: [{
    xtype     : 'textareafield',
    grow      : true,
    height    : 100,
    name      : 'message',
    fieldLabel: 'Message',
   /* disabled : true,*/
   readOnly : true,
    value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
    anchor    : '100%'
}]
});

See it here