Widget Box

1. Widget Box

  • Please note that widget box title should now have .widget-title class.
    Also widget color options are now applied to the box, not header.
    For example .widget-header.header-color-blue becomes .widget-box.widget-color-blue
  • Widget box consists of header and body.

2. Widget Box Options

  • You can use following classes for a different widget box color:
    1. .widget-color-blue
    2. .widget-color-blue2
    3. .widget-color-blue3
    4. .widget-color-green
    5. .widget-color-green2
    6. .widget-color-green3
    7. .widget-color-red
    8. .widget-color-red2
    9. .widget-color-red3
    10. .widget-color-yellow
    11. .widget-color-purple
    12. .widget-color-pink
    13. .widget-color-dark
    14. .widget-color-grey
  • Add .transparent for transparent widget box:
  • Add .light-border for light widget body border:
  • Add .collapsed for widget box to be collapsed by default:

3. Widget Header

  • Header consists of title and toolbar(optional action buttons):


    1. .widget-header-small makes .widget-header smaller
    2. .widget-header-large makes .widget-header larger
    3. .widget-header-flat disables gradient background on .widget-header
  • Widget toolbar consists of buttons with custom icons and elements.
  • Current action buttons that trigger an event and perform an action are:
    1. settings
    2. reload
    3. fullscreen
    4. collapse
    5. close
    Please refer to widget events section for more info.
  • For data-action="collapse" button, you can change collapsed/expanded icons by specifying icon's data-icon-show & data-icon-hide attributes:
    Also, if you specify any icon with -up or -down in its name, it will be automatically flipped.
    You can also add .collapsed class to .widget-box to become collapsed by default.
  • You can have multiple toolbars in widget header:

    .no-border class on a .widget-toolbar hides its border.
  • To have a dropdown menu inside widget toolbar, you should wrap the action button and menu inside a .widget-menu element:
  • To have tabs in widgets, you should put the ul.nav-tabs element inside .widget-toolbar and .tab-content should be inside widget body's .widget-main:

4. Widget Body

  • Widget box consists of header and body.
  • .widget-body consists of .widget-main and optional toolboxes .widget-toolbox
  • .widget-main and .widget-toolbox can have the following padding classes:
    • .no-padding
    • .padding-2
    • .padding-4
    • ...
    • .padding-30
    • .padding-32
    For example when putting a table inside widget box you may want to use .no-padding
  • .widget-toolbox can be before or after .widget-main

    Add .toolbox-vertical to .widget-toolbox for vertical toolbox

5. Functions & Events

  • The following functions are available for widgets:
    1. close
    2. toggle
    3. hide
    4. show
    5. reload
    6. fullscreen
  • The following events are triggered when using widgets:
    Before Events:
    1. show.ace.widget triggered before a widget box is shown
    2. hide.ace.widget triggered before a widget box is hidden
    3. close.ace.widget triggered before a widget box is closed
    4. reload.ace.widget triggered before a widget box is reloaded
    5. fullscreen.ace.widget triggered before a widget box is fullscreen
    6. setting.ace.widget triggered before a widget box is fullscreen
    After Events:
    1. shown.ace.widget triggered after a widget box is shown
    2. hidden.ace.widget triggered after a widget box is hidden
    3. closed.ace.widget triggered after a widget box is closed
    4. reloaded.ace.widget triggered after a widget box is reloaded
    5. fullscreened.ace.widget triggered after a widget box is fullscreened
  • With "before events" you can cancel an action.
    For example when you are waiting for remote content to arrive, you can cancel "close" events:
     $('#my-widget').on('close.ace.widget reload.ace.widget', function(event) {
        if(waitingForContent) {
           event.preventDefault();//action will be cancelled, widget box won't close
  • With "after events" you can do some action after its finished:
     $('#my-widget').on('shown.ace.widget', function(event) {
  • reload.ace.widget can be used to load remote content.
    When data is ready, you can trigger reloaded.ace.widget:
     $('#my-widget').on('reload.ace.widget', function(ev) {
       $.ajax({url: 'remote-data.php'}).done(function(content) {
         //use content
         //when ready ...
  • setting.ace.widget event does not have an "after" event.
    You can use it to be notified when "settings" button is clicked and show a dialog:
     $('#my-widget').on('setting.ace.widget', function(ev) {
       //launch a modal (settings box) or other appropriate action

7. Widget Drag & Drop

  • Using jQuery UI, you can add drag & drop functionality to widget boxes or any other set of elements:
        connectWith: '.widget-container-col',
        items: '> .widget-box',
        opacity: 0.8,
        revert: true,
        forceHelperSize: true,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
        start: function(event, ui){
            //when an element is moved, its parent (.widget-container-col) becomes empty with almost zero height
            //we set a "min-height" for it to be large enough so that later we can easily drop elements back onto it
            ui.item.parent().css({'min-height': ui.item.height()})
        update: function(event, ui) {
            //the previously set "min-height" is not needed anymore
            //now the parent (.widget-container-col) should take the height of its child (.wiget-box)