CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.dialog.definition.vbox

class
See source

Vertical layout box for dialog UI elements.

This class is not really part of the API. It just illustrates the properties that developers can use to define and create vertical layouts.

Once the dialog is opened, the created element becomes a CKEDITOR.ui.dialog.vbox object and can be accessed with CKEDITOR.dialog.getContentElement.

// There is no constructor for this class, the user just has to define an
// object with the appropriate properties.

// Example:
{
    type: 'vbox',
    align: 'right',
    width: '200px',
    children: [
        {
            type: 'text',
            id: 'age',
            label: 'Age'
        },
        {
            type: 'text',
            id: 'sex',
            label: 'Sex'
        },
        {
            type: 'text',
            id: 'nationality',
            label: 'Nationality'
        }
    ]
}

Filtering

Properties

  • align : String

    (Optional) The alignment of the whole layout. Example: center, top.

    See source

  • children : Array

    Array of CKEDITOR.ui.dialog.uiElement objects inside this container.

    See source

  • className : String

    CSS class names to append to the UI element.

    See source

  • commit : Function

    Function to execute whenever the UI element's parent dialog's CKEDITOR.dialog.commitContent method is executed. It usually takes care of the respective UI element as a standalone element.

    See source

  • expand : Boolean

    (Optional) Whether the layout should expand vertically to fill its container.

    See source

  • heights : Number

    (Optional) The heights of individual cells.

    See source

  • id : String

    The ID of the UI element.

    See source

  • onHide : Function

    Function to execute whenever the UI element's parent dialog is closed.

    See source

  • onLoad : Function

    Function to execute the first time the UI element is displayed.

    See source

  • onShow : Function

    Function to execute whenever the UI element's parent dialog is displayed.

    See source

  • padding : Number

    (Optional) The padding width inside child cells. Example: 0, 1.

    See source

  • requiredContent : String | Object | style

    The content that needs to be allowed to enable this UI element. All formats accepted by CKEDITOR.filter.check may be used.

    See source

    When all UI elements in a tab are disabled, this tab will be disabled automatically.

  • setup : Function

    Function to execute whenever the UI element's parent dialog's CKEDITOR.dialog.setupContent method is executed. It usually takes care of the respective UI element as a standalone element.

    See source

  • style : String

    Inline CSS classes to append to the UI element.

    See source

  • styles : String

    The CSS styles to apply to this element.

    See source

  • title : String

    The popup label of the UI element.

    See source

  • type : String

    The type of the UI element. Required.

    See source

  • width : Array

    (Optional) The width of the layout.

    See source