customform not in modal Bootstrap4
customform not in modal Bootstrap4
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">×</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
This discussion has been closed.
Answers
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:
Also add (without replacing any of the script includes - this is an additional integration layer):
Allan
Great! Thank you