Bootstrap Editor: Horizontal Form

Paulus

Is there anyway to display the editor form inputs in a horizontal layout? If possible, center the contents.
Currently, I am only getting the vertical or stacked layout when using the bootstrap 3 styling, with the contents aligned to the left.

Also, is it possible to change the size of the buttons (edit, update, delete)?

Finally, can col specs be changed in the following col-md-6?

table.buttons().container().appendTo($('.col-sm-6:eq(0)', table.table().container()));

The search button, which shares row with the action buttons, has the col specs: col-sm-6.

allan

Is there anyway to display the editor form inputs in a horizontal layout?

Yes, you would need to add styles to do this though since the fields are in div elements which are 100% width by default. A suitable selector might be div.DTE_Field and float them left or use flex box.

Possibly a better option might be to use templates which was introduced in 1.6.

Also, is it possible to change the size of the buttons (edit, update, delete)?

Yes, that is a CSS issue as well: div.dt-buttons a.btn for Bootstrap styling.

Finally, can col specs be changed in the following col-md-6?

Yes, use the dom option to set the value you want to use. The documentation shows the default value for Bootstrap styling.

Allan

Paulus

A bit disappointing, having to create templates for over 20 tables in a project!!!

Paulus

Hello,

I have found the source of the problem with the horizontal alignments. It is the col-lg-4 and col-lg-8 for the filed/label and field/input, respectively.

How, do I override these classes in my application?

$.extend( true, $.fn.dataTable.Editor.classes, {
    "header": {
        "wrapper": "DTE_Header modal-header"
    },
    "body": {
        "wrapper": "DTE_Body modal-body"
    },
    "footer": {
        "wrapper": "DTE_Footer modal-footer"
    },
    "form": {
        "tag": "form-horizontal",
        "button": "btn btn-default"
    },
    "field": {
        "wrapper": "DTE_Field",
        "label":   "col-lg-4 control-label",
        "input":   "col-lg-8 controls",
        "error":   "error has-error",
        "msg-labelInfo": "help-block",
        "msg-info":      "help-block",
        "msg-message":   "help-block",
        "msg-error":     "help-block",
        "multiValue":    "well well-sm multi-value",
        "multiInfo":     "small",
        "multiRestore":  "well well-sm multi-restore"
    }
} );

allan

$.extend( true, $.fn.dataTable.Editor.classes, {
  "field": {
     "label":   "... control-label",
     "input":   "... controls"
  }
} );

where you'd put that before your initialisation of Editor and fill it in with whatever class names you want for the layout.

Regards,
Allan

Paulus

Hello Alan,

Thanks so much, this works well. Still got few things to solve to get a desired table but happy with the progress so far.