Opened 7 years ago

Closed 7 years ago

#5927 closed Bug (fixed)

Option to specify custom styles to apply just to the control element in dialog elements

Reported by: Alfonso Martínez de Lizarrondo Owned by: Alfonso Martínez de Lizarrondo
Priority: Normal Milestone: CKEditor 3.4
Component: UI : Dialogs Version: 3.3.1
Keywords: Doc? Cc:

Description

Currently it's a little hard to do nice designs with the dialog.ui elements, for example one problem is that specifying a style option in the definition is applied to both the wrapper and the native control, so putting things like width makes it go crazy.

By allowing a new attribute "controlStyle" we can allow to specify some css that must be applied only to the control and make it render as expected.

The screenshot shows in the first part how it looks without applying any style, the wrapper tries to take all the width and it's ugly. The second part shows that if we specify a width, the select element becomes too wide, so that isn't the solution. The third one shows the rendering after applying the patch to this dialog.

		contents : [
			{
				id : 'Info',
				elements :
				[
							{
								id : 'cmbStrokeWidth',
								label: editor.lang.googlemaps.strokeWidth,
								labelLayout : 'horizontal',
								widths: [ '50', '66'],
								style : 'width:116px;',
								controlStyle : 'width:45px; ',
								type : 'select',
								items :
								[
									[ '10', '10']
								]
							},
							{
								id : 'cmbStrokeOpacity',
								label: editor.lang.googlemaps.strokeOpacity,
								labelLayout : 'horizontal',
								widths: [ '50', '64'],
								style : 'width:116px;',
								controlStyle : 'width:45px; ',
								type : 'select',
								items :
								[
									[ '1', '1']
								]
							},
							{
									type:'hbox',
									widths: [ '130', '80'],
									children:
									[
										{
											id : 'txtStrokeColor',
											label: editor.lang.googlemaps.strokeColor,
											labelLayout : 'horizontal',
											widths: [ '50', '64'],
											style : 'width:116px;',
											controlStyle : 'width:64px; ',
											type : 'text'
										},
										{
											id : 'btnColor',
											type : 'button',
											label : editor.lang.googlemaps.chooseColor
										}
									]
							}
				]
			}
		]

Attachments (2)

dialog styles.png (10.8 KB) - added by Alfonso Martínez de Lizarrondo 7 years ago.
screenshots
5927.patch (2.0 KB) - added by Alfonso Martínez de Lizarrondo 7 years ago.
Proposed patch

Download all attachments as: .zip

Change History (5)

Changed 7 years ago by Alfonso Martínez de Lizarrondo

Attachment: dialog styles.png added

screenshots

Changed 7 years ago by Alfonso Martínez de Lizarrondo

Attachment: 5927.patch added

Proposed patch

comment:1 Changed 7 years ago by Frederico Caldeira Knabben

Keywords: Review+ added; Review? removed

comment:2 Changed 7 years ago by Alfonso Martínez de Lizarrondo

Keywords: Doc? added

Fixed with [5685]

It still needs correct documentation, in general I don't think that the dialogs stuff is easy to understand with the current docs. I'll try to write something about this in the wiki and check that the automatic docs are updated.

comment:3 Changed 7 years ago by Frederico Caldeira Knabben

Keywords: Doc? added; Doc removed
Resolution: fixed
Status: review_passedclosed

Ok, Doc? is still valid for closed ticket.

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