Download & Extend
CKEditor - WYSIWYG HTML editor » Issues

Editor too wide, requires scrolling horizontally

Posted by sb56637 on January 10, 2010 at 9:12pm
Project:CKEditor - WYSIWYG HTML editor
Version:6.x-1.0
Component:User interface
Category:bug report
Priority:critical
Assigned:Unassigned
Status:closed (fixed)

Issue Summary

Hi,

I'm using CKEditor 3.1 on Drupal 6. When the browser is resized, the ckeditor text field does not resize, making it necessary to scroll horizontally to see all the text. I also find that the text field is too wide when I set it to 100% width, I had to set it to 102% so that it doesn't start off being too wide for new posts. Is there any workaround? Here's my site: http://budgetlightforum.cz.cc/forum , you can use my test user account, username: ckeditor , and the password is the same as the username.

Thanks a lot!

Login or register to post comments

Comments

#1

Posted by sb56637 on January 11, 2010 at 3:30am

OK, this has something to do with the theme. I am using the stock "Newsflash" theme. I tried my setup with "Garland" and it resized correctly.

#2

Posted by wwalc on January 12, 2010 at 11:47am
Status:active» postponed (maintainer needs more info)

Check the dev release. Looks like a duplicate of #651904: CKEditor Widens Beyond content area when Resized.

#3

Posted by sb56637 on January 12, 2010 at 1:39pm
Status:postponed (maintainer needs more info)» active

Hi there, thanks for the reply.

I tried upgrading to the dev release, and it appears to be the same. Any other tweaks?

Thanks!

#4

Posted by wwalc on January 12, 2010 at 2:45pm

I checked http://budgetlightforum.cz.cc/forum and it seems I'm missing something here... in what browser do you have this problem?

#5

Posted by sb56637 on January 12, 2010 at 4:22pm

Firefox 3.6 RC1

Try setting your browser width to around 700 px or so. The border around ckeditor fits and resizes correctly with the browser window, but the internal text field in ckeditor is too wide, the line on which you type is wider than the visible window and the user has to scroll sideways as he types to see it all.

Thanks for looking into this.

#6

Posted by sb56637 on January 13, 2010 at 3:49am

I just had a user report this same bug. He says:

Also, as I write a long line in this box I'm writing in, I go off the right side of the page. Maybe this field width is set too wide. It seems like I should be wrapping text when I get to the edge of the box, not about an inch after I get to it. I don't have a lot of screen resolution (1024x768), so that may be part of the problem. Using Windows XP and SeaMonkey (which is basically Firefox now it seems like).

#7

Posted by sb56637 on January 13, 2010 at 4:48am
Version:6.x-1.0-beta1» 6.x-1.x-dev

#8

Posted by wwalc on January 13, 2010 at 11:12am

Thanks for helping me in understanding what's the problem.
Try adding this:

body {
  min-width:400px;
}

in sites/all/modules/ckeditor/ckeditor.css

#9

Posted by wwalc on January 13, 2010 at 11:18am
Status:active» fixed

Fixed in CVS: http://drupalcode.org/viewvc/drupal/contributions/modules/ckeditor/ckedi...

Please reopen this issue if that did not solve the problem for you. Also please let me know whether it works for you as expected :)

#10

Posted by wwalc on January 13, 2010 at 11:27am
Status:fixed» active

Ooops that was actually wrong idea :/

#11

Posted by wwalc on January 13, 2010 at 11:35am

I have reverted changes in CVS.

The correct solution is to add some extra config to ckeditor.config.js:

Below:

  config.extraCss = '';

Add this:
  config.extraCss = "body{min-width:400px}";

and clear browser's cache.

More information about issues with themes can be found here: http://drupal.ckeditor.com/tricks

#12

Posted by sb56637 on January 13, 2010 at 12:18pm

Nice! Thank you very much, that did the trick. It now wraps the text and resizes beautifully to whatever the browser size is.

I'll leave this issue open, because the issue appears to be specific to the very popular "Newsflash" theme, and you might want to add this fix into the code as an exception whenever the "Newsflash" theme is detected.

Thanks again!

#13

Posted by wwalc on January 14, 2010 at 8:20am
Status:active» fixed

Fixed in CVS, thanks!

http://drupalcode.org/viewvc/drupal/contributions/modules/ckeditor/ckedi...

#14

Posted by sbogner on January 25, 2010 at 8:32pm

I have the same problem; tried the fix in #11 but that didn't change anything. I'm using the Acquia_marina theme. I cleared my browser and cleared the Drupal cache, didn't make any difference. Any ideas?

I have the same issue with both Firefox 3.5.7 and IE 8.

#15

Posted by Dreher on February 4, 2010 at 2:39pm
Status:fixed» active

I am also having this problem in Giordani and the above fix did not work. Please help.

#16

Posted by Dreher on February 4, 2010 at 3:16pm
Version:6.x-1.x-dev» 6.x-1.0
Priority:normal» critical

I am also having this problem in Giordani and the above fix did not work. Please help.

#17

Posted by Dreher on February 4, 2010 at 8:28pm
Status:active» fixed

#18

Posted by wwalc on February 4, 2010 at 8:34pm

@Dreher - what was the problem?

#19

Posted by Dreher on February 5, 2010 at 3:47am

While testing the editor, I was uploading large pics or just holding down a letter key. I assumed the text would wrap like on a work document however apparently if you have a very long word, the editor treats it like one large object and will not wrap it. Stupid move on my part.

#20

Posted by System Message on February 19, 2010 at 3:50am
Status:fixed» closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

#21

Posted by kvvnn on June 11, 2010 at 7:52pm

Use 'word-wrap' css.

body{ word-wrap : break-word }

http://www.webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap/

#22

Posted by JohnMorris on December 5, 2010 at 5:26am

I just updated from FCKEditor to CKEditor, and had the "words won't wrap, it's hard to edit" problem. This was a new download today (Dec 4, 2010) for a Pixture-Themed site. The solution list above worked:

(Thanks to "wwalc" for the following)

The correct solution is to add some extra config to ckeditor.config.js:
Below:
config.extraCss = '';
Add this:
config.extraCss = "body{min-width:400px}";

There is quite a bit of "noise" around this issue -- so I thought I'd highlight that this change worked, and if you know how to edit it (use FileZilla), it takes 2 minutes -- and then you can enjoy the new editor. Although I'm not sure that this issue can be called "fixed" -- as the download does not work out-of-the-box and adding in some lines as above in a file is something that not "everyone" can do . . .

Thanks for the help though!

JHM

#23

Posted by senortim on April 26, 2011 at 11:26pm

I'm still seeing this issue. I'm using Firefox 3.5.18, D6.2, CKEditor 1.3. I tried the mod for the ckeditor.config.js file, but it didn't have any effect. This is in the Acquia Marina 6.x-2.0 theme.

The only way I can get the window to **not** require a side-scroll is to make the editor width to 1200. This isn't a major issue, since I'm the only one editing this site, but I thought I should report it.

#24

Posted by euchrid9 on May 31, 2011 at 10:09am

For anyone still getting stuck with this, I posted a css solution for a similar problem that worked for me here:
http://drupal.org/node/751196#comment-4538018

I found it wasn't "word-wrap" or "min-width" but "white-space" which was causing this for me.

nobody click here