I encountered a small problem. I am using CKEditor - when I assign it to a profile, by a default all plugins and buttons are on. So far everything look right. However, when I want to limit number of buttons and plugins, by choosing only those relevant to me, the input area of editor (below buttons) is wider than editor window and horizontal scroll bar inside the editor appears.

I would like to keep the input area exactly the size of editor. Can anyone help me with this? I apologize if this is a duplicate issue.

Comments

Status:Active» Postponed (maintainer needs more info)

Could you post a screenshot of this?
I'm not sure how that happens. If you add many buttons they often wrap to the next row (in an ungly way as they are all still in the same group) until we've fixed #27795: Adsense does not show. (You could help test the patches there and see if it makes easier to control the buttons.)
Are you using a custom theme?
Does the same thing happen in Garland?

StatusFileSize
new10.37 KB
new7.78 KB

I use Acquia Marina. I checked, in Garland my problem does not exist.

To explain it better - the size of the whole editor is the same in Garland and in Acquia Marina, but the textarea inside the editor is scrollable in Acquia Marina by default (as you can see in the screenshot there is scroll bar at the bottom). My AM theme does not have right sidebar and is fixed width one.

I suspect the problem might be in the css file of the theme, because Garland's and AM's site code looks exactly the same.

I will try to compare it, but I am not a coder/programer, so it will take time. Unless you have a different suggestion.

Does your theme place a fixed width on the body? If so, that might explain why it's so much wider than the editor iframe. Normally it has no explicit width and would not stretch beyond the iframe?

This might be the same basic problem encountered in #487704: Theme background shows in editor window. That is, you need to style the body tag to match the final style on your rendered nodes, and then override those body styles to make it have the correct appearance outside the editor. Counter-intuitive, yes, but it's that or make an editor-specific stylesheet when the editor doesn't provide a unique class on its body/wrapper tags.

If you use Firebug for FF, you could probably see which styles are causing the extra-wide body if you select the body element inside the iframe. It's a bit tricky to do that using the mouse so I suggest first finding the iframe element and then expanding it element by element until you reach the editing area body element.

Did This issue ever get solved. I am having the same problem but cannot seem to find the cause. I am using the theme "Wilderness".

Status:Postponed (maintainer needs more info)» Needs work

I am having a similar issue except in my case, the ckeditor text area goes behind my blocks because it is too wide. I am using genesis subtheme. Would this be a theme issue? I have also noticed that it will only let me resize the text area (or iframe it think its called) vertically. When I test it in Garland it lets me adjust the width, not that i need that feature I just want it to automatically be the same size as the html text body area.

Any ideas??

I too have a similar problem, the theme this time is ANTSIN - BLOGBUG II

Cheers

The same issue for me in our custom theme based on blueprint. Any ideas?

Component:Code» Editor - CKeditor
StatusFileSize
new1.56 KB
new23.92 KB

EDIT: See #17 for updated module for 6.x and 7.x.

-----------------------------

Hi,

I had the same problem and I used a work around:

I created a new module, which was redisplaying the theme used by the default full toolbar but with the tools removed that are not there.

This way it looks a lot nicer!

I also added that the language of the editor is automatically set to drupal language.

Needs some testing, but besides that works fine (using hook_wysiwyg_editor_settings_alter()).

I attached the code of the module and a screenshot.

Best Wishes,

Fabian (LionsAd)

PS: I first did this as a patch vs. wysiwyg module, which would also work, but I need this in production, so patch & wait was not an option here ...

That's a nice start to group the buttons.

The code has some issues, some formatting improvements, ... going to provide an update if time permits.
So the only thing i'm really missing is a solution to display every button available of no button/plugin was chosen. So completely disable editors' own default config.

This right turns out to be a real issue: #835646: 'Teaser Break' Button missing

I still hope, wysiwyg will keep evolution and improve and implement the requested key features we're all waiting for.

The CKEditor editable textarea actually is an iframe containing a separate HTML page that is tagged editable. This iframe HTML page contains the whole HTML element tree (starting , then etc.). To make formats look like on your page itself, the page CSS is loaded into the iframe. Therefore, if body has a fixed width property, that is also applied to the CKEditor iframe body. In this case, a horizontal scrollbar appears as the iframe is a wide as the body is as a whole.

If CKEditor is configured to show a border around the input area, then the iframe body has a class attribute with value "cke_show_borders". (I did not check what's going on if CKEditor is not configured this way.) So, to solve the problem, just add the following lines to your CSS:

body.cke_show_borders {
width: auto;
}

Maybe, there is a cleaner solution using several CSS files or style elements, thus omitting the unintended application of CSS properties. I did not investigate this because the above approach solves that issue for me.

Thank you, Fabianx. This solved my problem with grouping buttons.

Thanks Fabianx. This solved my IE toolbars not wrapping issue but for some reason when I activated your module I lost my defined CSS styles. The styles drop down now only shows the default styles instead of the ones defined in the wysiwyg CSS section. Any ideas?

thank you.. the module should start with

<?php
and doesn't need the
?>
at the end... otherwise.. I get all the code printed on screen.

Realy works, thanks man!

Thx for that workaround module.

@Fabianx: I'd prefer to see Drupal coding standards followed, but otherwise a nice start to the solution.

I wrote a little module to reorder the buttons (#277954-132: Allow to sort editor buttons). Perhaps you can add in a way to group them with your module.

Component:Editor - CKeditor» Code
StatusFileSize
new1.57 KB
new1.39 KB

@NancyDru: You are definitely right about that. Unfortunately I don't have the time to integrate that at this moment.

I attached two new files for both drupal 6.x and drupal 7.x that do give no errors in coder and should adhere to Drupal coding standards.

Best Wishes,

Fabian (LionsAd)

Component:Editor - CKeditor» Editor - CKEditor

Thank you for spending the time putting this together Fabianx. Works great.

Thank you Also, Fabian- this has helped me a greatly as i was having the same problem of the CKeditor input area's width exceeding that of the content it's embedded within. One interesting note: this only happened for me in certain browsers (e.g. IE 7, and 8), but worked fine in Firefox 3

I have installed:
library: CKEditor 3.4.2.6041
module: Wysiwyg 6.x-2.1
theme: Acquia Prosper 6.x-1.1

installing #17 worked perfectly for me as well.

Perhaps this should be integrated with the WYSIWYG module package or at least linked to on the project page for Ckeditor installations under Supported editors/plugins > Plugins ?

subscribe

Thanks Fabian at #8 that solved the same problem for me.

Thank you Fabian for the workaround module!

#17 works great to solve an IE 8 issue with CKEditor colliding with nodeform columns on the right. Thanks Fabian.

subscribe

Status:Needs work» Closed (duplicate)

The workarounds posted here use the same methods as in #829266: Fixing toolbar for the CKeditor / Using the settings hook, so can we please merge these issues and continue over there?
The symptoms seem to be the same as well (too wide editor because the buttons are in the same group and don't wrap properly).

Thank you.

EDIT: Pasted the wrong issue number..

Tested this today and my ckeditor toolbar is nicely placed on three lines.
Thank you. This helped me a lot.

#17 Helped for Drupal 7, wysiwyg, ckeditor, tarski theme. Thanks!

#17
Thanks a lot this saved me a lot of work!

works in drupal 7
wysiwyg-7.x-2.x-dev
ckeditor_3.5.2

You rock Fabian! Thanks so much!

Where to configure ckeditor not to show with a border wrapped around ?

Try the CSS. But I suspect you won't like it.

Status:Closed (duplicate)» Fixed

I experienced the same issue after configuring the IMCE module feature that allows the "Browse Server" button to work with the Image button in the CKeditor Toolbar. While I did get my Browse Server button to work, I lost not only most of the buttons in the CKEditor tool bar but also when returning an image it makes the screen go completely opaque.

I was able to restore my buttons by returning to the admin/settings/ckeditor then setting the toolbar to FULL. That might work for some.

I still have my opaque issue and so I'm off to figure that out next.

Non Programmer:
Core: Drupal 6.20 (brand new install for a sub-domain)
Only Modules so far: WYSIWYG, CKEditor, IMCE

Status:Fixed» Closed (duplicate)

@tom.d, Uninstall either the CKEditor module or Wysiwyg module, they are NOT to be used together and are incompatible.
admin/settings/ckeditor won't even exist if you're using just Wysiwyg module with the CKEditor library so we can't give support for it here. All Wysiwyg's settings are under admin/settings/wysiwyg in D6.

Not sure if this will fix the above issues, but it seems related. I posted here because it was the first result in Google for "drupal ckeditor too wide".

I eventually found that the css class ".cke_skin_v2 *,.cke_skin_v2 a:hover,.cke_skin_v2 a:link,.cke_skin_v2 a:visited,.cke_skin_v2 a:active" in editor.css (in ckeditor/skins/v2) had the property "white-space:no-wrap;".

Changing this to "white-space:normal;" solved this for me; now the buttons no longer extend outside of the editing box, and the screen does not need to be scrolled horizontally. I changed it in the above-mentioned "editor.css", and in my theme with the "!important" tag, just to make sure...

I assume that some themes over-ride this setting, and some don't.

EDIT: Sorry, this stopped working an hour later - no reason why, and it makes no sense. Nothing had changed, no files uploaded, no cache enabled, nothing changed on server... Why did it work for a while and then stop working? I will post back here if and when I find out what is going on...

SECOND EDIT (sorry about all this): Please see my new post below - now believed fixed.

Right, first of all, I am running Drupal 7, but I believe the same fix can be adapted for Drupal 6.

This is what I ended up doing and finding out, in the hope it helps someone else:

- uploaded the Administration Menu module to my site, and flushed all caches.

- added this css:
.cke_skin_v2 *,.cke_skin_v2 a:hover,.cke_skin_v2 a:link,.cke_skin_v2 a:visited,.cke_skin_v2 a:active: white-space:no-wrap !important;
to ALL css files I was using - both for admin theme AND the site theme. That meant going into the core theme 'Seven' and modifying the style.css, and copying the modified theme (the whole folder) to /sites/all/themes, then swtiching to that for the admin theme - because a core update would kill it again. ('Seven' was well liked, so I couldn't easily replace it).

- checked, checked, and checked again that it was really working this time by continually flushing the cache, loading different edit pages, and refreshing the pages as well.

- it is easy to get confused by all the css options; ckeditor has its own css, which I modified, appeared to work, and then stopped working; the admin theme has its own css, which affects how ckeditor appears; and the site theme css could also be conflicting, depending on settings for floats, margins, negative offsets and so on...

- I still cannot work out what happened when I initially changed the css, it worked, and then stopped working. Flushing all the caches, even with the Administration Menu module, did not get it working again. I'm guessing that the css for ckeditor somehow 'got in front' of the admin css, but on subsequent page loads and refreshes, the admin css took over...

- I used Firebug (in Firefox) to locate the 'bad' css that was causing the horizontal scrolling; it was from there that I found ckeditor's "editor.css" file. It would be best, it seems, to ignore that (especially as update to the module will bring the problem back until it is re-done), and just edit the admin css.

Hope this helps someone else out... would be great if there was some sort of 'master css over-ride' type module or setting...

#17 solved my similar problem where the editor itself was overrunning the right sidebar, with buttons obscured by the sidebar. I found this (to my horror) after launching the site and thinking all was OK, because all was OK for the editor in Firefox which is what I use, but IE, Safari, and Chrome users were turned off of entering data (yes, I should've tested this there).

MANY THANKS Fabianx for this fix. Hope it gets released as part of WYSIWIG/CKEditor module so others aren't hit with this.

Status:Closed (duplicate)» Active

Hi,

I'm not sure if I indicated the correct status, but under D7 and using CKEditor 3.6.2.7275 with the Touch 7.x-1.4 theme, I am having the same problem as described in previous earlier posts. However, the buttons don't extend beyond the width of the block, but the horizontal bar appears.

I tried to apply the fix in #17 (installing it as a module, correct?) and it didn't correct the problem. The horizontal bar doesn't appear in Bartik.

Any suggestions would be very much appreciated. Thank you.

@starbucksguy, I wonder if this is caused by #1405786: width 100% can makes child wider than parent. Could you try the simple change in that patch?

TwoD - I've never applied a patch before, but I might be willing to give it a try. Thanks for this information.

If you're on Windows, read HowTo: How to apply a patch to a contributed module - Beginner's version (Windows). For Ubuntu etc, if you've got git, git apply file.patch in the wysiwyg folder.

Great work Fabian.
Thanks!

Fabianx, thank you so much! I've had a frustrating time trying to configure CKEditor using first the CKEditor module and now the WYSIWYG module. Got it working and then noticed the button bar and nearly had my head explode. Found this post with your easy module solution...it really made my day. Thanks so much for taking the time!

Version:6.x-2.1» 7.x-2.2
Assigned:Unassigned» l4facc
Priority:Normal» Critical
StatusFileSize
new14.82 KB

I am experiencing a similar problem, the text goes off the text frame. Please look at the screenshot and help me! I read Fabianx explanation and downloaded the his files, but I don't know how to use them. Please explain how!

I am using drupal 7 and corporate clean theme.
Thanks

Assigned:l4facc» Unassigned
Priority:Critical» Normal

#44: Please put the module to your sites/all/modules directory and enable it.

Then it should work automatically for the editor

However your issue seems different and has nothing to do with the CKEditor, but with the display. This is a pure theme problem. Please ask in some forums.

I am having the same trouble.

I tried #17 which did not work for me.

I then disabled wysiwyg modules but that did not help.

I tried chrome, firefox and safari but it makes no difference.

Also, I can not get any line breaks in my text boxes. I can past as plain text or past html with

and
tags but I can not get the paragraphs to form. They are one long blob.

I am using Bartik Plus theme (if that tid-bit helps).

I had the width problem with both ckeditor, tinyMCE
in editor settings (admin/config/content/wysiwyg/profile/full_html/edit)
css > Editor default CSS
solved it for me

Thanks GiorgosK! That worked for me.

Status:Active» Closed (cannot reproduce)

@aeternus, sounds like you need to tweak your text format/filter settings so the server doesn't remove those tags when rendering the content.

This issue is becoming very fragmented with several smaller issues interleaved (some unrelated to eachother) and the original poster hasn't been around for years so I'm closing it.

Feel free to open a new issue if you still have problems and share as much information you can about your editor configuration, the theme(s) you are using and whether this only happens under some conditions/browsers.