PDA

View Full Version : IE: Cursor Moves Up in Text Area, After the Appearence of Vertical Scrollbar



prijithkr
22 Apr 2013, 9:10 PM
Hi,

I am Having a Text area, with fixed width and Maxlength provided, I started typing in some text, but after the appearence of the Vertical scrollbar, after typing few more length, the Cursor starts to come up, no matter how many times, we focus it on the bottom, as soon as we start typing, it again comes back to the middle

This occurs only in IE, and i found it happening even in the Sencha Doc 'Live preview'

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.TextArea

In the below code, the problem occured after typing more than 210 Chars



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



43299

slemmon
24 Apr 2013, 11:02 AM
Are you seeing the same issue in 4.2 or 4.2.1 beta?

prijithkr
25 Apr 2013, 4:36 AM
Yeah I tried in this site too... Please run the same code in the below link of sencha in IE 8
after 210Chars... you can find the malfunction

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.TextArea

slemmon
25 Apr 2013, 3:57 PM
I just tried on Windows 7 with IE9 and did not see the issue you described using the following 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',
anchor : '100%',
listeners: {
change: function (field, newValue) {
count.setValue(newValue.length);
}
}
}]
});


var count = Ext.widget('textfield', {
renderTo: document.body
});

prijithkr
26 Apr 2013, 1:18 AM
But I need it to run on IE8,
Any suggestion?


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

slemmon
26 Apr 2013, 12:34 PM
I was able to see the issue you're reporting if I enter a string of characters with no spaces. Out of curiosity, do you have a real-world use case where someone is entering several hundred characters in a text area with no spaces?

chrisjs
24 Jun 2013, 6:32 AM
I also have this problem with IE8. I am using ExtJS 4.1.3

It does not necessarily need characters without spaces. If you have enough characters this also appears if you enter a lot of characters.

If you enter more text, with every keydown the position jumps to the entered character, when you release the key (keyup) the text is scrolled so you see the middle position of the entered text. With every keypress the textarea flickers.

I found some hints, that this is a bug in IE,
http://stackoverflow.com/questions/2933320/textareas-scroll-by-themselves-on-ie8-every-time-you-type-one-character
when you have
width: 100% in the styles.

Here http://grantovich.net/misc/ie8-textarea-bug/ this solution is mentioned
Using this

textarea {
width: 700px;
min-width: 100%;
max-width: 100%;
}
should help.

I use this

<style type="text/css">
textarea {
width: 700px ! important;
min-width: 100% ! important;
max-width: 100% ! important;
}
</style>
now in my template. This overrides the inline CSS and the flicker is gone.