radio items always inside hbox

I'm using CKEditor 3.0.1

I find it very annoying that radio controls are always shown inside a hbox. It would be very useful to be able to list radio controls vertically.

If you look at the "radio" function definition in "_source/plugins/dialogui/plugin.js", you will fine at line 421:

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

If you look at the "labeledElement" function definition in the same file, there seems to be such a distinction possible:

if ( elementDefinition.labelLayout != 'horizontal' )
...
else
{
...
}

Maybe the same could be done for listing radio controls. Or maybe I'm missing something and there IS a way? My goal is to find a way without modifying the CKEditor source code so that it can easily be updated with future releases.

- Chris

Thu, 12/17/2009 - 21:16

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: radio items always inside hbox

You should code it to verify that it works and the create a ticket at the dev site attaching your patch so it's added to the core and everyone benefits from this.

Of course, you should double check first that your ideas are right and the patch is really needed.

Wed, 04/06/2011 - 13:13

helmo̷

Joined: 24/03/2011

Posts: 84

Re: radio items always inside hbox

Actually it is quite simple to change in the dialogui/plugins.js. Change line 474 from

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

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

Then add labelLayout to the radiobutton:

                            {
                                type : 'radio',
                                id : 'xxx',
                                label : 'XXX:',
                               labelLayout: 'vertical',
                                items : [
                                    [ 'xxx', 'X' ],
                                    [ 'yyy', 'Y' ],
                                    [ 'zzz', 'Z' ]
                                ] ,
                                'default' : 'X'
                            }

The only problem is that you have to use:
<script type="text/javascript" src="ckeditor_source.js"></script>
And if you ever update ckeditor to a newer version - check if the code is there (or a similar solution) - and if not add it again...