Opened 6 years ago

Closed 6 years ago

Last modified 4 years ago

#9947 closed Bug (fixed)

Editor Width Overflows in Webkit Browsers

Reported by: Edward A Savage Jr Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.0.2
Component: General Version: 4.0 Beta
Keywords: webkit chrome safari Cc:

Description

I have found the menus do not wrap properly on Webkit (confirmed in Chrome 23.0.1271.97 m and Safari 5.1.7) browsers when the editor is inside a fieldset element. This causes the editor to overflow parent containers.

Code that reproduces the bug:

<!DOCTYPE html>
<html>
	<head>
		<title>CKEditor</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style>
			html {
				background-color: lightgray;
			}
			#content {
				margin: 0 auto;
				border: 1px solid black;
				padding: 10px;
				width: 400px;
				overflow: hidden;
				background-color: white;
			}
			fieldset {
				margin: 0;
				border: 0 none;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<fieldset>
				<textarea name="editor1" id="editor1">&lt;p&gt;Foo foo!&lt;/p&gt;</textarea>
			</fieldset>
		</div>
		<script type="text/javascript" src="http://ckeditor.com/apps/ckeditor/4.0.1/ckeditor.js"></script>
		<script>
			CKEDITOR.replace('editor1');
		</script>
	</body>
</html>

Firefox:
http://i.imgur.com/3ddX4.png

Chrome:
http://i.imgur.com/gDW4c.png

I also created a post on Stack Overflow.

Attachments (7)

firefox.png (14.3 KB) - added by Edward A Savage Jr 6 years ago.
Firefox Screen Shot
chrome.png (10.3 KB) - added by Edward A Savage Jr 6 years ago.
Chrome Screen Shot
ckeditor.html (887 bytes) - added by Edward A Savage Jr 6 years ago.
Test case
9947.html (915 bytes) - added by Olek Nowodziński 6 years ago.
9947_narrow_ff_chrome.png (137.2 KB) - added by Olek Nowodziński 6 years ago.
9947_postfix_narrow_ie8.png (54.6 KB) - added by Olek Nowodziński 6 years ago.
9947a.png (104.8 KB) - added by Olek Nowodziński 6 years ago.

Download all attachments as: .zip

Change History (25)

Changed 6 years ago by Edward A Savage Jr

Attachment: firefox.png added

Firefox Screen Shot

Changed 6 years ago by Edward A Savage Jr

Attachment: chrome.png added

Chrome Screen Shot

Changed 6 years ago by Edward A Savage Jr

Attachment: ckeditor.html added

Test case

comment:1 Changed 6 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.0.2
Status: newconfirmed
Version: 4.0.14.0 Beta

Confirmed on Chrome and Safari from the really beginning of v4. This issue is not reproducible on 3.6.6.

comment:2 Changed 6 years ago by Jakub Ś

NOTE:
When you add width:100%; to fieldset problem in Chrome disappears but is still present in Safari. This could be used as partial workaround.

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

comment:4 Changed 6 years ago by Roy Shoa

Hi, I did not found this report and i open another ticket. I believe its the same bug: http://dev.ckeditor.com/ticket/10044

comment:5 Changed 6 years ago by Jakub Ś

#10044 was marked as duplicate

comment:6 Changed 6 years ago by Roy Shoa

Just to inform that ticket #10044 explain the bug better then this ticket. The problem is not because of the fieldset it is because of the white-space:nowrap.

I fix it for now by removing the "white-space:nowrap;" definition on the class "*{}" in the file "/moono/editor.css".

Thanks!

comment:7 Changed 6 years ago by Edward A Savage Jr

I didn't mean to imply that the fieldset caused the issue, only that it triggered the issue. Apparently, wrapping the element in a table will also trigger the issue.

Changed 6 years ago by Olek Nowodziński

Attachment: 9947.html added

Changed 6 years ago by Olek Nowodziński

Attachment: 9947_narrow_ff_chrome.png added

Changed 6 years ago by Olek Nowodziński

Attachment: 9947_postfix_narrow_ie8.png added

comment:8 Changed 6 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedreview

The problem isn't straightforward. From a certain point of view it isn't a problem at all.

Regardless of the solution, toolbars can still be broken when using a very narrow editor. I propose an experimental solution for the issue in t/9947a branch @cksource.

But…

There are still some cases that break toolbar behaviour in webkit-based browsers (a very narrow editor):

This can be fixed by adding white-space: normal to .cke_toolbar and .cke_toolgroup. But such fix breaks toolbars in old IEs (7,8):

So, for old IEs the possibilities are as follows:

  • Use white-space: normal for .cke_toolbar and .cke_toolgroup and destroy toolbar.
  • Don't do anything and let toolbars overflow the editor.

Both are bad.

Moreover, t/9947a may affect toolbars of inline instances, which, at the moment, are still inconsistent among different browsers: FF breaks lines when scaling viewport down but Chrome doesn't. We don't know which behaviour is correct.

In my opinion there's no need to extend t/9947a with additional changes since it may lead into serious troubles. It can be accepted once we make sure it doesn't break inline editing UX as well.


In fact, considering the complexity of the issue, the safest solution is to use a fixed fieldset width like fieldset { width: 400px; } and mark this ticket as invalid, which I'm a big supporter of.

comment:9 Changed 6 years ago by Edward A Savage Jr

Is there a way to view the diff for that branch? I'd like to know what was changed.

comment:10 Changed 6 years ago by Roy Shoa

The problem that I show in ticket #10044 its a bug and as i believe its not belong to this issue.

I fix it for now by removing the "white-space:nowrap;" definition on the class "*{}" in the file "/moono/editor.css".

After the fix the toolbar is not overflow in all the browsers. please check again the #10044 ticket and open it as a bug if it really is.

comment:11 in reply to:  9 Changed 6 years ago by Olek Nowodziński

Replying to sonnysavage:

Is there a way to view the diff for that branch? I'd like to know what was changed.

Here you go.

comment:12 in reply to:  8 ; Changed 6 years ago by Roy Shoa

Replying to a.nowodzinski:

I use your fix and its not working for me, you can see it on the CSS area in this project http://jsfiddle.net/royshoa/9c2Xp/12/ using chrome browser.

comment:13 in reply to:  12 ; Changed 6 years ago by Olek Nowodziński

Replying to royshoa:

Replying to a.nowodzinski:

I use your fix and its not working for me, you can see it on the CSS area in this project http://jsfiddle.net/royshoa/9c2Xp/12/ using chrome browser.

This is why your sample doesn't work.

comment:14 in reply to:  13 Changed 6 years ago by Roy Shoa

Replying to a.nowodzinski:

Replying to royshoa:

Replying to a.nowodzinski:

I use your fix and its not working for me, you can see it on the CSS area in this project http://jsfiddle.net/royshoa/9c2Xp/12/ using chrome browser.

This is why your sample doesn't work.

I know this but in my case i can not use the "table-layout: fixed;" on the table, in fact, i can not use any CSS changes on the table that wrap the editor (it is website CMS). The older CKEditor versions was not having this issue and I hope that it will fix also in the new versions.

Changed 6 years ago by Olek Nowodziński

Attachment: 9947a.png added

comment:15 Changed 6 years ago by Olek Nowodziński

I updated t/9947a branch with fix for Kama. Editor works just fine with sonnysavage's sample (just like v3).

In my option t/9947a solves the problem. It's also more specific (.cke_top) than the solution from comment:10 (modifying CSS reset code), which may affect other parts of UI.

The only thing affected by t/9947a is the inline editor's toolbar, which now collapses as the viewport is narrow in Webkit.

comment:16 Changed 6 years ago by Piotrek Koszuliński

Status: reviewreview_passed

comment:17 Changed 6 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed

Issue fixed in git:556cb20f852a5.

comment:18 Changed 4 years ago by Seth

Logged a new bug related to this issue. The problem is still experienced if you have two editors within the same fieldset element.

https://dev.ckeditor.com/ticket/12539

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