rich combo in a separate looks bad

[Charlie]

Here's a fun one in the Kama Skin. If you create a custom toolbar with ONLY richcombo boxes in it, the CSS margins will be wrong (I.e. Items below it will crowd the bar).

This is because the bottom margin of 5 lies on the toolgroup element. To fix this, the bottom margin CS should be moved from the toolgroup element to the toolbar element. Give it a look!

CKEDITOR.replace( 'editor1',
					{
						toolbar: [
									['Styles','Format','Font','FontSize'],
									'/',
									['Bold','Italic','Underline','Strike', 'Paste','PasteText','PasteFromWord','-','Undo','Redo','-','TextColor','BGColor']
								]

					});

[Charlie]

Moved the margin-bottom to a different element

[Sa'ar Zac Elias]

Your patch is not correct though as it ruins the default toolbar.

[Charlie]

Give me a minute...I'll get it right! :-P

[Charlie]

updated

[Charlie]

Floating always makes me nervous, but it appears to work in IE 7,8 FF 3 and Chrome 5. It's one of the only ways to get around the stupid collapsing margins bug.

[libek]

For what it's worth:

I think this same bug pops up whenever the richcombo boxes get squished together. If you put together toolbar items in the kama skin so that two of them SHOULD be separated by a line break, it produces a really weird effect:

[Charlie]

Ahh yes, I've seen that one before too, but I can't remember out how to reproduce it at the moment. What's the toolbar code you are using there?

[libek]

Okay, so -- there are two different ways to specify which items on a toolbar are next to each other.

This is the default toolbar:

	    ['Source','-','Save','NewPage','Preview','-','Templates'],
	    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
	    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
	    '/',
	    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
	    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Link','Unlink','Anchor'],
	    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
	    '/',
	    ['Styles','Format','Font','FontSize'],
	    ['TextColor','BGColor'],
	    ['Maximize', 'ShowBlocks','-','About']

This is a different way of visually getting the same thing:

	    ['Source'],['Save','NewPage','Preview'],['Templates'],
	    ['Cut','Copy','Paste','PasteText','PasteFromWord'],['Print', 'SpellChecker', 'Scayt'],
	    ['Undo','Redo'],['Find','Replace'],['SelectAll','RemoveFormat'],
	    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
	    '/',
	    ['Bold','Italic','Underline','Strike'],['Subscript','Superscript'],
	    ['NumberedList','BulletedList'],['Outdent','Indent','Blockquote','CreateDiv'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Link','Unlink','Anchor'],
	    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
	    '/',
	    ['Styles','Format','Font','FontSize'],
	    ['TextColor','BGColor'],
	    ['Maximize', 'ShowBlocks'],['About']

But the two different versions will handle "linebreaks" very differently. Basically, in addition to the manual linebreaks ("/"), CKEditor toolbears also break on "],[" if necessary. Because of this, even though "-" breaks up a line into different "bubbles", it DOESN'T make it okay for the toolbar to linebreak there. Make sense?

Because my editor doesn't have a fixed width, I needed to make it as flexible as possible. So I took care to break up my bubbles as much as I possibly could.

This is my toolbar:

	    ['Source'],
	    ['PasteFromWord'],
	    ['Undo','Redo'],
	    ['Find','Replace'],
	    ['SelectAll','RemoveFormat'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Image','Table','HorizontalRule'],
	    ['NumberedList','BulletedList'],
	    ['Outdent','Indent','Blockquote'],
	    ['Link','Unlink','Anchor'],
	    ['DWUser','DWCut','Poll'],
	    ['Bold','Italic','Underline','Strike','Subscript','Superscript','SpoilerDark','SpoilerLight'],
	    ['Font'],
	    ['FontSize'],
	    ['TextColor'],
	    ['BGColor'],
	    ['Maximize','ShowBlocks']

But the important thing is how wide your editor is. I think what's causing the problem in this case is the fact that there should be an "optional" linebreak between the two richcombo boxes, and it's not working because of the float. You should be able to get the same effect, therefore, by using my toolbar and then manually resizing your editor until it looks like my screenshot.

Adding the margins as suggested in the above patch DOES fix it for me, by the way.

[Wiktor Walc]

Similar ticket: #6454

[Garry Yao]

Fixed with [6422].