Question

I am using JQuery-DataTables-Editable-1.3 along with DataTables-1.9.4. I am able to add the add_delete_toolbar. However on click of add button, formAddNewRow is not aligned to center of page. Have searched and tried a lot of combinations.

$('#example').dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bProcessing": true,
                "bServerSide": true,                    
                "sAjaxSource": "scripts/prgrm_mstr.php",
                "aoColumns": [
                      { "mData": "0", sDefaultContent: "" },
                      { "mData": "1", sDefaultContent: "" }
                    ]                   
            } ).makeEditable({
                        sUpdateURL: function(value, settings)
                                         {
                                               return(value); //Simulation of server-side response using a callback function
                                         },
                        sAddURL: "scripts/AddData.php",                         
                        sDeleteURL: "scripts/DeleteData.php",
                        sAddDeleteToolbarSelector: ".dataTables_length",
                                oAddNewRowButtonOptions: {  label: "Add...",
                                                icons: {primary:'ui-icon-plus'} 
                                },
                                oDeleteRowButtonOptions: {  label: "Delete",
                                                icons: {primary:'ui-icon-trash'}
                                },
                                oAddNewRowFormOptions: {    
                                                title: 'Add a new program',
                                                show: "blind",
                                                hide: "blind",
                                                modal: true                                                 
                                }                                   
            });

Form is as follows –

<form id="formAddNewRow" action="#" title="Add new record">
                <label for="prgrm_id">Program ID</label>
                <input type="text" name="prgrm_id" id="prgrm_id" class="required" rel="0" />
                <label for="prgrm_nm">Program Name</label>
                <input type="text" name="prgrm_nm" id="prgrm_nm" class="required" rel="0" />
        </form>

Answer 1

I managed by making following css changes –

.ui-dialog { margin-top:-300px;margin-left:400px;}