Dialog API: Custom alignment of radio buttons and their labels

[Martin Røssland]

I have not found a good way to adjust the alignment of the radio buttons. The radio buttons is outputted as table cells in a single table row, that makes it impossible to use css to display them in an vertical list (Internet Explorer).

It would be great to have the following options for the radio element:

• Vertical or horizontal display of radio buttons
• Whether to display the labels above, below, in front of or behind the radio buttons.

[Frederico Caldeira Knabben]

CKEditor has no option to insert a list of radio options as you're describing. I think you are using the editor inside another system which has a plugin for it. In that case, there is nothing we can do here for you and you should contact the plugin developer.

Please correct me if I'm wrong.

[Martin Røssland]

Sorry, maybe I should have been a little bit more specific.

I'm extending the link dialog with new link types (as a new plugin). Instead of having a select of different link types, I want to use radio buttons instead.

When using your UI framework, you define the different radio buttons as items on a radio element (please correct me if I'm wrong). My problem is that I have no way of changing how the radio buttons is outputted (please correct me again if I'm wrong). What I basically want is to have a vertical list instead of an horizontal list.

[Frederico Caldeira Knabben]

Ah... much clearer now... we're talking about the dialog API here.

You're right, currently this is not possible.

[Jakub Ś]

This issue was duplicated in #8104.

[Jakub Ś]

This issue was duplicated in #8329

---

Attaching comment from #8329 since it offers a fix:

It would be nice to allow radio buttons to be able to use vbox layout instead of the hardcoded hbox-layout.

This can be done by inserting the following code:

if ( elementDefinition.labelLayout != 'horizontal' )
 new CKEDITOR.ui.dialog.vbox( dialog, [], inputHtmlList, html );
else
  new CKEDITOR.ui.dialog.hbox( dialog, [], inputHtmlList, html );

instead of:

new CKEDITOR.ui.dialog.hbox( dialog, [], inputHtmlList, html );

In version 3.6.1 the code that has been changed is in line 479 of plugins.js under the dialogui folder. It is then possible - when creating the radiobutton group in the dialog to use: labelLayout: "vertical"

By writing the code in the above way it would be backward compatible using the hbox layout if nothing is defined - but if anything else than "horizontal" is used, vbox layout will be used instead.

I hope you will include this "minor" change so I don't manually have to insert it in the code for every update of CKEDITOR ;-)

[Henrik Helmø Larsen]

IE9 may have a problem when laying out the dialog - see case #8364.

[Jakub Ś]

When this feature will be implemented please check @Helmo2 issue #8364. His findings might be useful.

[Henrik Helmø Larsen]

It has now been 17 months since I reported this issue - though not a bug it is a minor feature (2 lines of code)... I have now upgraded to 4.0.1 and it has not been added yet! Are there any plans for adding this? BW, Helmø

[Frederico Caldeira Knabben]

Replying to Helmø:

A good way to speed up things is by proposing real and well coded fixes through GitHub pull requests over the ckeditor-dev repository: ​https://github.com/ckeditor/ckeditor-dev

[Henrik Helmø Larsen]

You are right - I am sorry...

I have visited the pull request on GitHub.com - but cannot figure out how to submit a new item? Here comes a guide to other users with the same problem as me:

In order to layout radiobuttons vertical instead of (hardcoded) horizontal do the following: Open plugin.js in the dialogui folder in plugins. Finde the following line of code (line 416 of version 4.0.1):

new CKEDITOR.ui.dialog.hbox( dialog, children, inputHtmlList, html );

Replace it with the following code:

//Ability to support both vbox and hbox layout (backward compatible)
if ( elementDefinition.buttonLayout == 'vertical' )
  new CKEDITOR.ui.dialog.vbox( dialog, children, inputHtmlList, html );
else
  new CKEDITOR.ui.dialog.hbox( dialog, children, inputHtmlList, html );

When setting up a radio button compontent insert the following line to layout vertical:

buttonLayout : 'vertical'

Here is an example:

{
  type : 'radio',
  id : 'radioLink',
  label : 'Insert link to:',
  items : radioButtons,
  buttonLayout : 'vertical',
  setup : function( data ) {
          ...

[Henrik Helmø Larsen]

An example of vertical allignment for radiobuttons

[Nikola Petkanski]

I made a pull request with the code quoted in this ticket:

• ​https://github.com/ckeditor/ckeditor-dev/pull/41