Opened 10 years ago

Closed 7 years ago

#5342 closed Bug (fixed)

Editor always at least 300px wide on Webkit

Reported by: Mikko Kinnunen Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: WebKit HasPatch Cc:

Description

Webkit-based browsers refuse to create editors less than 300 pixels wide. Following code creates 300px wide editor, even though 150 is specified for all width options. Testcode was made against 2nd example in /_samples/replacebycode.html

CKEDITOR.config.toolbar_Mini = [ ['Bold','Italic','RemoveFormat'] ];
CKEDITOR.replace( 'editor2', { width: 150, resize_maxWidth: 150,  resize_minWidth: 150, skin: 'v2', toolbar: 'Mini' } );

Happens on Safari 4.0.3 (Windows) / Chrome 4.1.249.1036 (Windows)

Attachments (1)

5342.html (2.3 KB) - added by Garry Yao 9 years ago.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 9 years ago by Mikko Kinnunen

Version: 3.23.3

Problem still present in CKE 3.3 & Chrome 5

comment:2 Changed 9 years ago by Alfonso Martínez de Lizarrondo

Version: 3.33.2

comment:3 Changed 9 years ago by Mikko Kinnunen

Someone came up with a workaround in the forums:

http://cksource.com/forums/viewtopic.php?p=48574#p48574

Worked for me, would be nice to have it included in core.

comment:4 Changed 9 years ago by Alfonso Martínez de Lizarrondo

Keywords: WebKit HasPatch added

comment:5 Changed 9 years ago by Mikko Kinnunen

Just adding a note that this bug reappears after setData(..)

  1. Setup 'instanceReady' fix described in the forum post
  2. Create editor normally with CKEDITOR.replace(...)
  3. Fix works and you get an editor the size you requested
  4. Change text in editor with editor_instance.setData('<p>Hello</p>');
  5. Editor changes text and grows to be 300px wide

Changed 9 years ago by Garry Yao

Attachment: 5342.html added

comment:6 Changed 8 years ago by Jakub Ś

Status: newconfirmed
Version: 3.23.0

Reproducible in Webkit from CKEditor 3.0.


Workaround based on original forum post, extended to handle also setData problem:

CKEDITOR.config.toolbar_Mini = [ ['Bold','Italic','RemoveFormat'] ];
CKEDITOR.replace( 'editor2', { width: 150, resize_maxWidth: 150,  resize_minWidth: 150, skin: 'kama', toolbar: 'Mini' } );
								
CKEDITOR.on('instanceReady', function (evt) {
	//editor
	var editor = evt.editor;
	resizeEditorWebkit( editor );		
								
	editor.on('afterSetData', function(event){
		resizeEditorWebkit( event.editor ); 								
	});

	editor.on('mode', function( event ){
		if ( event.editor.mode === 'source' ){			
			var txtar = document.getElementById('cke_' + event.editor.name).getElementsByTagName('table')[0].getElementsByTagName('textarea')[0];
			txtar.style.display = 'block';
			txtar.style.height = 'inherit';				
		}else{
			resizeEditorWebkit( event.editor );
		}		
	});
});
							
function resizeEditorWebkit( editor ) {
	//webkit not redraw iframe correctly when editor's width is < 310px (300px iframe + 10px paddings)
	if (CKEDITOR.env.webkit && parseInt(editor.config.width) < 310) {									
		var iframe = document.getElementById('cke_contents_' + editor.name).firstChild;
		iframe.style.display = 'none';
		iframe.style.display = 'block';
	}
}

All you have to do is insert this code in E.g. replacebycode sample (second editor).
Can be tested by adding button:

<input type="button" value="click" onclick="CKEDITOR.instances['editor2'].insertHtml('<p>myTest</p>');" />

Update:
Nick Kurucz has pointed out that this workaround does not work when switching to source mode. I have added something extra - still not perfect as you can see editor resized for a second.

Last edited 8 years ago by Jakub Ś (previous) (diff)

comment:7 Changed 8 years ago by webhelio

This workaround works well for us, even though you can see resized for a second it works and in the end that's what we need. Thanks!

comment:8 Changed 7 years ago by Piotrek Koszuliński

Resolution: fixed
Status: confirmedclosed

Expired. Now everything works correctly.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy