View Full Version : Html Editor Line Spaces Problem in Internet Explorer

28 Feb 2015, 5:47 AM
First please only watch video , i captured video for my problem ,

0-19 Seconds: Captured in explorer it is my problem look at the line spaces,
19-.. Seconds Captured in Chrome i want like this look at again line spaces and please compare with explorer


Thank you

1 Mar 2015, 11:40 PM
Anybody fixed this problem ?

2 Mar 2015, 2:38 AM

problem is, that when you press ENTER key, Chrome create DIV block, but IE create P block with top and bottom margins. So you need change that margins to zeros in css.

4 Mar 2015, 12:32 AM
First of All ,
Thanky you for answer , your fixing is right but realy i dont know how can i fix this problem can you help me more ?

4 Mar 2015, 12:59 AM
i fixed this problem this code lines ;

value: "<div>"+data[j].MESSAGE+"<div>",

i added coming to value from server, '<div>' :)

But @Unable (http://www.sencha.com/forum/member.php?674270-Unable) dont say me 'ie use <p> chrome use <div>' anytime i dont fixed this problem ever never ,
therefore thank you @Unable

4 Mar 2015, 1:58 AM
Its correct, IE generate p tag. Other browsers generate div. And Firefox using only br tag :) But when you use text aling button, Firefox wrap line to div. :) This behaviour is built in browsers..

If you want remove p tag margins in HTML editor, there are two ways, that I know.

1. in extjs src file 'ext/src/form/field/HtmlEditor.js' change in function getDocMarkup line
+ (Ext.isOpera ? 'p{margin:0;}' : '')
to this line:
+ 'p{margin:0;}'

But whe you will update extjs, that change disappear.

2. override getDocMarkup function in same style

4 Mar 2015, 2:05 AM
@Unable ,Thank you, you are best ever man

4 Mar 2015, 2:09 AM
but if i changed library , other person use html editor maybe see mistake . this is team project ?

therefore , i used the <span> work textalign and i dont need change otherthing :) you think good choise ?

4 Mar 2015, 3:11 AM
If I understood your span solution:
1. You have text from server, which you want show in HTML editor
2. You wrap that text by span tag?

This isn't good solution, because, if anyone remove that span during editation, problem appears again.

And yes, if you change library and other coworkers no, the won't see change. So you can override getDocMarkup function same style, during app launch, or during some init function. That depends on your project :)

Example of override:

getDocMarkup: function() {
var me = this,
h = me.iframeEl.getHeight() - me.iframePad * 2;

// - IE9+ require a strict doctype otherwise text outside visible area can't be selected.
// - Opera inserts <P> tags on Return key, so P margins must be removed to avoid double line-height.
// - On browsers other than IE, the font is not inherited by the IFRAME so it must be specified.
return Ext.String.format(
'<!DOCTYPE html>'
+ '<html><head><style type="text/css">'
+ 'p{margin:0;}'
+ 'body{border:0;margin:0;padding:{0}px;direction:' + (me.rtl ? 'rtl;' : 'ltr;')
+ (Ext.isIE8 ? Ext.emptyString : 'min-')
+ 'height:{1}px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:text;background-color:white;'
+ (Ext.isIE ? '' : 'font-size:12px;font-family:{2}')
+ '}</style></head><body></body></html>'
, me.iframePad, h, me.defaultFont);

5 Mar 2015, 12:00 AM
You are best men again best answer problem really fixed with good solution

Thanks a lot