Editor Button on top of form

crich04

I don't have a public interface yet but, I can. Maybe this is easy. I've tried using display: "bootstrap" but, the "submit" button is at the top of the form. It's awkward with tabbing through the fields. Any advice?

crich04

EditorButtonOnTop is the image of the styling that I want to change.
bootstrapOnly is a dialog that I open using only bootstrap. I like it's default styling. Button on bottom and title larger and bold.

crich04

When I inspect the html, I see this:

...div data-dte-e="foot" class="DTE_Footer modal-footer".../div
...div data-dte-e="form_info" class="DTE_Form_Info">.../div
...form data-dte-e="form" style="display: block;">.../form

The solution is to move the DTE_Footer after the form - like this.
...div data-dte-e="form_info" class="DTE_Form_Info">.../div
...form data-dte-e="form" style="display: block;">.../form
...div data-dte-e="foot" class="DTE_Footer modal-footer".../div

How can I do this through the options or api?

allan

Hi,

As you can in the Editor / Bootstrap example the submit button should be at the bottom of the form.

Do you have the Editor / Bootstrap CSS and JS files loaded?

The download builder is one way to make sure that all the required files are included.

Thanks,
Allan

crich04

I did use the download builder and I'm sure it's something as you describe. I'm assuming it must be an order thing . . . thanks for anytime you spend on this. Attached is a screenshot of the source. I'm working to provide a public facing example but, a little difficult right now - sorry. I'll continue trying . . . for now, can you give me feedback on image?

crich04

here is some code:

function initializeEditor() {
editor = new $.fn.dataTable.Editor( {
ajax: "...",
table: "#records",
idSrc: "transaction_id",
fields: [ {
label: "Invoice Number:",
name: "description"
}, {
label: "Due Date:",
name: "due_date",
type: "datetime"
}, {
label: "Amount:",
name: "adjusted_amount",
attr: {
type: "number",
step: "10",
value: "0.00",
},
}, {
label: "Category:",
name: "subaccount_id",
type: "selectize",
options: [],
opts: {
sortField: 'label'
}

        }, {
            label: "Customer:",
            name: "customer_id",
            "type": "selectize",
            options: [],
            opts: {
                sortField: 'label'
            }
        },  {
            label: "Project:",
            name: "project_id",
            type: "selectize",
            options: [],
            opts: {
                sortField: 'label'
            }            
        }

    ],
    formOptions: {
        inline: {
            onBlur: 'submit'
        }
    }

} );
editor.dependent('customer_id', function ( val, data, callback ){
      getProjectsByCustomer(val);
    }); 

}

function initializeReceivables(recordType) {
table = $('#records').DataTable( {
"buttons": [
{ extend: "create", editor: editor }
],
"language": {
"loadingRecords": "<span style='color:red' class='blink'><b>Please wait - loading...</b></span>",
"processing": "<span style='color:red' class='blink'><b>Please wait - loading...</b></span>"
},
"lengthMenu": [ [-1], ["All"] ],
"paging": true,
"ordering": true,
"processing": true,
"select": false,
"autoWidth": false,
"columnDefs": [
{ "visible": false, "targets": [0, 1, 2, 3, 12, 13, 14, 15] },
{ "orderable": false, "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] }
],
"columns": [
//hidden columns
{ data: "cashflow_id" }, //0
{ data: "subaccount_title"}, //1
{ data: "balance"}, //2
{ data: "register_id"}, //3
//Visible columns
{ data: "transaction_id", className: "alignCenter"}, //4
{ data: { //5
"": "days",
"filter": "days",
"display": "days_due"
}, className: "alignCenter"},
{ data: "description"}, //6
{ data: "due_date", className: "alignCenter"}, //7
{ data: "close_date", className: "alignCenter"}, //8
{ data: { //9
"": "adjusted_amount",
"filter": "adjusted_amount",
"display": "adjusted_amountMoney"
}, "editField": "adjusted_amount", className: "alignRight"},
{ data: { //10
"_": "balance",
"filter": "balance",
"display": "balanceMoney"
}, className: "alignRight"},

            { data: null, //11
                className: "alignCenter",
                defaultContent: ''
            },
            { data: "amount"}, //12 
            { data: "amountMoney"}, //13
            { data: "customer_id" }, //14
            { data: "project_id" } //15

/*
{ data: "category" },
{ data: "subaccount_id" },
{ data: "close_date", className: "alignCenter" },
{ data: "status" },
{ data: "type" },

*/
],
"drawCallback": function ( settings ) {
drawReceivables(settings);
} //End Callback
}) //End Receivables Table Initialization
}

crich04

Here's how I open the form:
$('button.editor_create').on('click', function (e) {
e.preventDefault();
getDueDate();
getIncomeAccounts();
getCustomers();
editor.create( {
title: 'Create new forecasted receivable:',
buttons: 'Add'
} );
} );

allan

Thanks for the code and screenshot. I don't see anything out of place there.

Can you give me a link to the page so I can take a look please? Its probably some thing CSS related - perhaps a conflict from some other styling.

Allan