CKEditor's tool bar is chopped off in IE7/IE8,

[Senthil]

Patch delivered for Ticket #4237 (CKEditor's ToolBar is chopped off in Safari browser 3.x) is still not fixing the reported problem. So creating a new ticket as developer has asked to do so. Attaching the screenshot and sample file to replicate the problem.

[Garry Yao]

It's enough to spread #4237's fix to all browsers to have this fixed.

[Garry Yao]

Beside the mentioned issue, we should also notice that the background of toolbar is incorrectly fixed with 'arrows', probably due to the sprites.

[Garry Yao]

Replying to garry.yao:

Beside the mentioned issue, we should also notice that the background of toolbar is incorrectly fixed with 'arrows', probably due to the sprites.

Ah, just see it's already been reported at #4276 as a separated issue.

[Tobiasz Cudnik]

I'm sorry but this is not a bug. It's about wrong toolbar config usage (or at least it's behavior understanding).

Toolbar is supposed to be wrapped on item groups, not item separators. In attached config there are only 3 groups, where each contains couple of separators. Editor width is very narrow and it should be wide at least as longest toolbar item group.

Browsers handle this situation in different ways, that's why IE just keeps it without break (which is correct) but they are out of viewport. FF forces to wrap them, but this results in garbaged layout (like visible sprites reported as #4276 but also as incorrect toolbar background, which shouldn't be an image).

This issue is something different than #4237, as problem there was wrapping of item groups.

If you change those "-" separators to groups, all will work fine. Here is the code.

config.toolbar =
[
	['Source','Image','Maximize','Preview','Print'], ['Cut','Copy','Paste'], ['Undo','Redo'], ['Find','Replace'], ['HorizontalRule','Table','imageUPLOAD','Link','Unlink','SpecialChar'],
	['Format','Font','FontSize'], ['Bold','Italic','Underline','Strike'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['NumberedList','BulletedList','Outdent','Indent'], ['TextColor','BGColor']
];

[Garry Yao]

I see the same reason with Tobias, though this might not be a good user experience at the moment. Ideally editor width should dominate everything and toolbar group should be smart enough to adapt to it( e.g. cropp off extra items ) while this is out the scope of this ticket.