customform not in modal Bootstrap4

customform not in modal Bootstrap4

FicosFicos Posts: 85Questions: 21Answers: 0

Based on this example https://editor.datatables.net/examples/styling/template.html I try to build my own customForm. It is available on http://oostveen-advies.eu/module/test.html.

The initial code:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="J.T.F. Oostveen" />

    <title>Untitled 2</title>

 
    <!-- Custom fonts for this template -->
  <link href="../nl/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this page -->
  <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/DataTables-1.10.18/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Buttons-1.5.6/css/buttons.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Select-1.3.0/css/select.dataTables.min.css">
  <link href="../nl/library_v3/Editor-PHP-1.9.0/css/editor.dataTables.min.css">
  <link rel="stylesheet" href="../nl/css/editor.bootstrap4.min.css">

  <!-- Custom styles for this template -->
  <link href="../nl/css/sb-admin-2.min.css" rel="stylesheet">
    
<style>
#customForm {
    display: flex;
    flex-flow: row wrap;
}
 
#customForm fieldset {
    flex: 1;
    border: 1px solid #aaa;
    margin: 0.5em;
}
 
#customForm fieldset legend {
    padding: 5px 20px;
    border: 1px solid #aaa;
    font-weight: bold;
}
 
#customForm fieldset.name {
    flex: 2 100%;
}
 
#customForm fieldset.name legend {
    background: #bfffbf;
}
 
#customForm fieldset.office legend {
    background: #ffffbf;
}
 
#customForm fieldset.hr legend {
    background: #ffbfbf;
}
 
#customForm div.DTE_Field {
    padding: 5px;
}
    </style>
</head>

<body id="page-top">
    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">
        <!-- Main Content -->
        <div id="content">
        <!-- Begin Page Content -->
        <div class="container-fluid">
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">test</h6>
            </div>                  
            <div class="card-body">
            <div class="row">
            <div class="col-lg-8">
                 
                <div class="table-responsive">
                  <table class="table table-striped table-bordered" id="example" style="width:100%; cellspacing=0">        
        
   
 
<!-- table id="example" class="display" style="width:100%" -->
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </tfoot>
                </table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="customForm">
                        <fieldset class="name">
                            <legend>Name</legend>
                            <editor-field name="first_name"></editor-field>
                            <editor-field name="last_name"></editor-field>
                        </fieldset>
                        <fieldset class="office">
                            <legend>Office</legend>
                            <editor-field name="office"></editor-field>
                            <editor-field name="extn"></editor-field>
                        </fieldset>
                        <fieldset class="hr">
                            <legend>HR info</legend>
                            <editor-field name="position"></editor-field>
                            <editor-field name="salary"></editor-field>
                            <editor-field name="start_date"></editor-field>
                        </fieldset>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</body>
  <script src="../nl/library_v3/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="../nl/library_v3/bootstrap-4.1.3/js/bootstrap.min.js"></script> 
  <script src="../nl/library_v3/moment/moment.js"></script>
  <!-- Page level plugins -->
  <script src="../nl/library_v3/dataTables-1.10.18/datatables.js"></script>
  <script src="../nl/library_v3/dataTables-1.10.18/DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
  
    <script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script src="../nl/library_v3/Editor-PHP-1.9.0/js/dataTables.editor.min.js"></script>
    <script src="js/table.client.js"></script>
</html>

The form doesn't appear in a modal window. I wonder why because creating a 'normal' modal gives no issue.

Thank you
Jan

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Hi Jan,

    I think you've got a bit of a mix of DataTables base styling and Bootstrap that is largely causing the issue.

    Currently you have:

      <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Buttons-1.5.6/css/buttons.dataTables.min.css">
      <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Select-1.3.0/css/select.dataTables.min.css">
      <link href="../nl/library_v3/Editor-PHP-1.9.0/css/editor.dataTables.min.css">
      <link rel="stylesheet" href="../nl/css/editor.bootstrap4.min.css">
    ``
    
    Change that to be:
    
    ```html
      <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Buttons-1.5.6/css/buttons.bootstrap4.min.css">
      <link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Select-1.3.0/css/select.bootstrap4.min.css">
      <link rel="stylesheet" href="../nl/css/editor.bootstrap4.min.css">
    

    Also add (without replacing any of the script includes - this is an additional integration layer):

        <script src="../nl/library_v3/Editor-PHP-1.9.0/js/editor.bootstrap4.min.js"></script>
    

    Allan

  • FicosFicos Posts: 85Questions: 21Answers: 0

    Great! Thank you

This discussion has been closed.