How to style lightbox modal buttons

elmo

I am developing an SMS system using datatables to list members and editor to of course edit details. The problem I am facing is that even though I used bootstrap (Editor Generator), it is still using lightbox to open the modal window for editing, and I cannot seem to edit the css for the modal buttons.

Here is my custom teplate code:

<!-- Custom Editor Template -->
        <div id="customForm">
          
                <div class="modal-content">
                <legend><editor-field name="MemID"></editor-field></legend>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div role="tabpanel" tabindex="-1">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist" data-tabs="tabs">
                                <li class="nav-item"><a class="nav-link active" href="#info" aria-controls="info" role="tab" data-toggle="tab">Lid Info</a></li>
                                <li class="nav-item"><a class="nav-link" href="#notes" aria-controls="notes" role="tab" data-toggle="tab">Notas</a></li>
                            </ul>
                                    
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="info">
                                <legend>Persoonlike Besonderhede:</legend>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div data-editor-template="FirstName"></div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div data-editor-template="LastName"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <div data-editor-template="IDNumb"></div>
                                            </div>
                                        </div>
                                    </div>
                    
                                <legend>Kontak Besonderhede:</legend>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div data-editor-template="Cell"></div>
                                            </div>
                                         </div>
                                         <div class="col-sm-6">
                                            <div class="form-group">
                                                <div data-editor-template="PhoneH"></div>
                                            </div>
                                         </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <div data-editor-template="PhoneW"></div>
                                            </div>
                                         </div>
                                         <div class="col-sm-6">
                                         <div class="form-group">
                                                <div data-editor-template="Email"></div>
                                            </div>
                                         </div>
                                    </div>
                            
                                <legend>Adres Besonderhede:</legend>
                                    <div class="row">
                                        <div class="col-sm-8">
                                        <div class="form-group">
                                                <div data-editor-template="Address"></div>
                                            </div>
                                         </div>
                                         
                                         <div class="col-sm-4">
                                         <div class="form-group">
                                                <div data-editor-template="Region"></div>
                                            </div>
                                         </div>
                                    </div>
                                </div>
                                
                                <div role="tabpanel" class="tab-pane" id="notes">
                                        <editor-field name="Notes"></editor-field>
                                 </div>
                            </div>
                        </div>
                    </div>
                
            </div>
        </div>  

When viewing the source code of the modal, I found it is being generated into a lightbox, not a bootstrap modal. The css and js files (again as per the editor generator) are as follow:

<!-- Editor CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sl-1.2.6/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

 <!-- Editor JS -->
  <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/table.tblusers.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/jquery.dataTables.yadcf.js"></script>
  <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)"></script>
  <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js"></script>

Please advise how I would work around this and either A) get editor to render the window in bootstrap as its supposed to or find another way of styling the modal buttons.

Thanks

allan

It looks like you've got a mix of DataTables default and Bootstrap styling there which isn't going to help things - try:

<!-- Editor CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.bootstrap4.min.css">
 
 <!-- Editor JS -->
  <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/editor.bootstrap4.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/table.tblusers.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/jquery.dataTables.yadcf.js"></script>
  <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)"></script>
  <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js"></script>

Looks like you've included a load of DataTables extensions - are you really using them all? If not, remove them since it will slow down initial page load.

Allan