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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

TwoD’s picture

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?

clawz’s picture

FileSize
10.37 KB
7.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.

TwoD’s picture

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.

wthomas’s picture

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".

hugh4’s picture

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

david1409’s picture

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

Cheers

aleksey.tk’s picture

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

Fabianx’s picture

Component: Code » Editor - CKeditor
FileSize
1.56 KB
23.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 ...

miro_dietiker’s picture

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.

Peter Thomassen’s picture

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.

jleinenbach’s picture

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

tars16’s picture

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?

hedac’s picture

thank you.. the module should start with and doesn't need the at the end... otherwise.. I get all the code printed on screen.

unegro’s picture

Realy works, thanks man!

JThan’s picture

Thx for that workaround module.

NancyDru’s picture

@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.

Fabianx’s picture

Component: Editor - CKeditor » Code
FileSize
1.57 KB
1.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)

Fabianx’s picture

Component: Editor - CKeditor » Editor - CKEditor
tnats’s picture

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

SchwebDesign’s picture

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 ?

boftx’s picture

subscribe

mcarrera’s picture

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

chaloalvarezj’s picture

Thank you Fabian for the workaround module!

Danny Englander’s picture

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

locomo’s picture

subscribe

TwoD’s picture

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

jazzun4141’s picture

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

Jiri Volf’s picture

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

icyread’s picture

#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

Outtascope’s picture

You rock Fabian! Thanks so much!

adrianmak’s picture

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

NancyDru’s picture

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

tom.d’s picture

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

TwoD’s picture

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.

euchrid9’s picture

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.

euchrid9’s picture

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

BaliDave’s picture

#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.

starbucksguy’s picture

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.

TwoD’s picture

@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?

starbucksguy’s picture

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

TwoD’s picture

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.

nevosa’s picture

Great work Fabian.
Thanks!

CaptDan’s picture

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!

l4facc’s picture

Version: 6.x-2.1 » 7.x-2.2
Assigned: Unassigned » l4facc
Priority: Normal » Critical
FileSize
14.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

Fabianx’s picture

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.

aeternus’s picture

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).

GiorgosK’s picture

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

elBradford’s picture

Thanks GiorgosK! That worked for me.

TwoD’s picture

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.