misaligned doms on bootstrap
misaligned doms on bootstrap
gmeles
Posts: 3Questions: 1Answers: 0
Hi all
I have a problem with datatables when I use boostrap
The doms appear misaligned with each other. i mean that the f on "dom: 'Bfrtlip'," appers one line bellow the B.
When I select datatables at "Step 1. Choose a styling framework" everything is fine
the html code is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/">blablabla</a>
<li class="nav-item active">
<a class="nav-link" href="/document/new/">blablabla <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/document/new/">blablabla <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/newuser">blablabla <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/newuser">blablabla <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/logout">blablabla elp1<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!-- dom: 'Bfrtlip', -->
<script type="text/javascript">
$(document).ready( function () {
$('#tb_ticket').DataTable( {
"lengthMenu": [ [5, 10, 20,50,100,250, -1], [5, 10, 20,50,100,250, "Όλες"] ],
"pageLength": 5,
"colReorder" : true,
"language": {
"url": "/static/DataTables/Greek.json"
},
dom: 'Bfrtlip',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="far fa-clipboard"></i>',
titleAttr: 'Αντιγραφή στο πρόχειρο',
exportOptions: {
columns: [ 1,2,3,4 ]
}
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel"></i>',
titleAttr: 'Εξαγωγή σε Excel',
exportOptions: {
columns: [ 1,2,3,4 ]
}
},
{
extend: 'print',
text: '<i class="fa fa-print" aria-hidden="true"></i>',
titleAttr: 'Εκτύπωση',
exportOptions: {
columns: [ 1,2,3,4 ]
}
}
],
columnDefs: [
{ orderable: false, targets: [-1,-2] }
]
} );
} );
</script>
<table id="tb_ticket" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th>ΑΑ</th>
<th>blablabla</th>
<th>blablabla</th>
<th>blablabla</th>
<th>blablabla</th>
<th>blablabla blablabla</th>
<th>blablabla</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td >blablabla</td>
<td >blablabla</td>
<td >blablabla 1</td>
<td >blablabla</td>
<td >05/02/2018 1:41 μμ.</td>
<td>
<a href="/document_detail/f21a574a-948a-4ad2-9a19-935914940222" class="btn">
<span class="fas fa-camera"></span>
</a>
</td>
</tr>
</tbody>
</table>
...........
......................
......................
......................
......................
......................
......................
......................
......................
...........
</div>
</body>
</html>
Thank you very much
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
If you have a look at the
domdocumentation, you'll see that the value is more complicated for Bootstrap (it needs to include suitabledivelements for the grid). Use that string as the starting point.Allan
I am a complete newbiew on this. Can you please be more specific
Thanks
Thank you very much
You pointed me to the right direction
Solve it!!!