DT not responsive on other browser than Chrome
DT not responsive on other browser than Chrome
l_core
Posts: 4Questions: 1Answers: 0
Hello,
I am a young web developer and I'm trying to implement the DataTables plugin on my project.
As I wrote in the title, I cannot achieve a full responsive table in other browsers than Chrome.
there's the code:
<!DOCTYPE html>
<html>
<head>
<title>Test Polymer</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Include Datatable -->
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
<!-- DataTables responsive JS-->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js"></script>
<!-- DataTables css -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<!-- DataTables responsive CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.card {
margin: 25px;
background-color: white;
padding: 25px;
}
.table {
font-family: 'RobotoLight', sans-serif;
}
</style>
<!-- Datatable script -->
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
</head>
The Body:
<body unresolved fullbleed>
<!-- Main structure -->
<div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<!-- More table content goes here -->
</table>
</div>
</div>
</core-scaffold>
</body>
</html>
If I try this on Chrome all goes fine and I can see the nice responsive interface of this amazing plugin but if I try with Firefox, IE or Safari I see the table border overflow the div.
What am I doing wrong?
Thanks to all for the support and for the patience
This discussion has been closed.
Answers
Can you link to a test page showing the issue, as per the forum rules, please.
Thanks,
Allan
There you can find the table: http://jsfiddle.net/2d2be1vc/
It seems to work fine on JSFiddle but when I load the entire page on Firefox it shouws up with an overflow of the right border without the nice (green) responsive button and functions of the plugin.
Any suggestion?
I don't appear to have a problem with your JSFiddle in Firefox when full window: https://jsfiddle.net/2d2be1vc/embedded/result/ . Does that work for you?
Allan
Thank you for your time. Well, I don't have any problem in JSFiddle, using firefox too.
On the other hand, when I load the page in the "classic" way I have this overflow issue.
Let me try to show you with a screenshot:
Chrome:
Firefox and others:
Seems to work okay for me if I remove the unknown HTML tags: http://datatables.net/dev/responsive_test.html .
Allan
Hi Allan and thank you again.
Can you please tell me which HTML did you remove from the code? Maybe I have some issue with the Polymer implementation...
All of the
<core...>elements.Allan