Ticket #6144 (closed Bug: fixed)

Opened 4 years ago

Last modified 4 years ago

rich combo in a separate looks bad

Reported by: comp615 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

6144.patch (503 bytes) - added by comp615 4 years ago.
Moved the margin-bottom to a different element
6144_2.patch (523 bytes) - added by comp615 4 years ago.
updated
6144_3.patch (360 bytes) - added by garry.yao 4 years ago.

Change History

Changed 4 years ago by comp615

Moved the margin-bottom to a different element

comment:1 Changed 4 years ago by Saare

  • Status changed from new to confirmed
  • Version changed from 3.4.1 (SVN - trunk) to 3.0

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

comment:2 Changed 4 years ago by comp615

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

Changed 4 years ago by comp615

updated

comment:3 Changed 4 years ago by comp615

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 4 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 4 years ago by comp615

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 4 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 4 years ago by wwalc

  • Milestone set to CKEditor 3.5.2

Similar ticket: #6454

comment:8 Changed 4 years ago by garry.yao

  • Status changed from confirmed to review
  • Owner set to garry.yao
  • Summary changed from RichComboBoxes in their own toolbar row produces poor CSS to rich combo in a separate looks bad

Changed 4 years ago by garry.yao

comment:9 Changed 4 years ago by Saare

  • Status changed from review to review_passed

comment:10 Changed 4 years ago by garry.yao

  • Status changed from review_passed to closed
  • Resolution set to fixed

Fixed with [6422].

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