Opened 7 years ago

Closed 7 years ago

#6144 closed Bug (fixed)

rich combo in a separate looks bad

Reported by: Charlie Owned by: Garry Yao
Priority: Normal Milestone: CKEditor 3.5.3
Component: UI : Toolbar Version: 3.0
Keywords: HasPatch Cc:

Description

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']
								]

					});

Attachments (3)

6144.patch (503 bytes) - added by Charlie 7 years ago.
Moved the margin-bottom to a different element
6144_2.patch (523 bytes) - added by Charlie 7 years ago.
updated
6144_3.patch (360 bytes) - added by Garry Yao 7 years ago.

Download all attachments as: .zip

Change History (13)

Changed 7 years ago by Charlie

Attachment: 6144.patch added

Moved the margin-bottom to a different element

comment:1 Changed 7 years ago by Sa'ar Zac Elias

Status: newconfirmed
Version: 3.4.1 (SVN - trunk)3.0

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

comment:2 Changed 7 years ago by Charlie

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

Changed 7 years ago by Charlie

Attachment: 6144_2.patch added

updated

comment:3 Changed 7 years ago by 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.

comment:4 Changed 7 years ago by 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:

http://i38.tinypic.com/2a7tvya.png

comment:5 Changed 7 years ago by 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?

comment:6 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by Wiktor Walc

Milestone: CKEditor 3.5.2

Similar ticket: #6454

comment:8 Changed 7 years ago by Garry Yao

Owner: set to Garry Yao
Status: confirmedreview
Summary: RichComboBoxes in their own toolbar row produces poor CSSrich combo in a separate looks bad

Changed 7 years ago by Garry Yao

Attachment: 6144_3.patch added

comment:9 Changed 7 years ago by Sa'ar Zac Elias

Status: reviewreview_passed

comment:10 Changed 7 years ago by Garry Yao

Resolution: fixed
Status: review_passedclosed

Fixed with [6422].

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy