Search code examples
google-chromesafariwebkitckeditorwysiwyg

CKEditor - Editor Width Overflows in Webkit Browsers

I discovered that the toolbars don't automatically wrap in WebKit browswers (Safari, Chrome). There is a three year old bug reported for CKEditor 3, but it was closed. Maybe this is a regression?

I'm not setting a width in my configuration. I want the editor to expand to the available width automatically. The editor is inside a div element that has the overflow: hidden; style applied to it.

Here's my toolbar configuration:

config.toolbar = [
    {name:'clipboard', items:['Cut', 'Copy', 'Paste', 'PasteText',
            '-', 'Undo', 'Redo']},
    {name:'insert', items:['Link', 'Unlink', 'Image', 'Table', 'SpecialChar']},
    {name:'basic', items:['Bold', 'Italic', 'Strike',
            '-', 'NumberedList', 'BulletedList',
            '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
            '-', 'Outdent', 'Indent',
            '-', 'RemoveFormat']},
    {name:'styles', items:['Styles']},
    {name:'additional', items:['jQuerySpellChecker',
            '-', 'Source',
            '-', 'Maximize']}
];

Firefox:
Toolbars wrap nicely

Chrome (cuts off editor because of the container):
Toolbars do not wrap

I don't want to add hard breaks, because I use the same editor configuration at varying widths. How do I resolve this without using manual wrap "buttons"?

UPDATE

I use fieldset elements in my forms. I found that adding the fieldset is what triggers the layout issue. This code reproduces the issue:

<!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>

UPDATE 2

I have filed a bug report. I will accept an answer that provides a work-around for this bug.

Solution

  • I can't reproduce this issue. Neither on 4.0 nor on 4.0.1. I just copied your toolbar configuration + { resize_dir: 'both', resize_minWidth: 300, width: 500 } to have better chance to observe if it works and this is the result:

    enter image description here

    Update (11 Jan 2013)

    I created such a sample:

    <!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <meta charset="utf-8">
    <script src="../ckeditor.js"></script>
    <style>
        #content {
            width: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="content">
        <textarea cols="80" id="editor1" name="editor1" rows="10">
            &lt;p&gt;Foo foo!&lt;/p&gt;
        </textarea>
        <script>
            CKEDITOR.replace( 'editor1', {
                toolbar: // your toolbar
            } );
        </script>
    </div>
</body>
</html>

    And everything still works fine for me. I can change browser's width and toolbar is correctly resizing. So my guess is that some of your styles are breaking editor or you've got some non default CKEditor's settings that cause this.