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

[Alfonso Martínez de Lizarrondo]

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

[Alfonso Martínez de Lizarrondo]

screenshots

[Alfonso Martínez de Lizarrondo]

Proposed patch

[Alfonso Martínez de Lizarrondo]

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.

[Frederico Caldeira Knabben]

Ok, Doc? is still valid for closed ticket.