Ticket #5094 (confirmed New Feature)

Opened 5 years ago

Last modified 18 months ago

UI: Radio element - alignment of radio buttons and its labels

Reported by: martin.rossland Owned by:
Priority: Normal Milestone:
Component: UI : Dialogs Version: 3.0
Keywords: IBM HasPatch Cc: satya_minnekanti@…

Description

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.

Attachments

radiobutton.JPG (27.7 KB) - added by Helmø 21 months ago.
An example of vertical allignment for radiobuttons

Change History

comment:1 Changed 5 years ago by fredck

  • Status changed from new to closed
  • Resolution set to invalid

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.

comment:2 Changed 5 years ago by martin.rossland

  • Status changed from closed to reopened
  • Resolution invalid deleted

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.

comment:3 Changed 5 years ago by fredck

  • Keywords Confirmed added

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

You're right, currently this is not possible.

comment:4 Changed 3 years ago by j.swiderski

This issue was duplicated in #8104.

comment:5 Changed 3 years ago by satya

  • Cc satya_minnekanti@… added
  • Keywords IBM added

comment:6 Changed 3 years ago by j.swiderski

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 ;-)

Last edited 2 years ago by j.swiderski (previous) (diff)

comment:8 Changed 3 years ago by j.swiderski

  • Status changed from reopened to confirmed
  • Keywords HasPatch added

comment:10 Changed 3 years ago by Helmø2

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

comment:12 Changed 2 years ago by j.swiderski

  • Keywords Confirmed removed
  • Version changed from 3.1 to 3.0

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

comment:13 follow-up: ↓ 14 Changed 21 months ago by Helmø

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ø

comment:14 in reply to: ↑ 13 Changed 21 months ago by fredck

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

comment:15 Changed 21 months ago by Helmø

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 ) {
          ...

Changed 21 months ago by Helmø

An example of vertical allignment for radiobuttons

comment:16 Changed 18 months ago by dinamic

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

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