Images in First and Last Page of Datatable Do Not Resize Dynamically.
Images in First and Last Page of Datatable Do Not Resize Dynamically.
davidklemke
Posts: 4Questions: 1Answers: 0
I'm using DataTables 1.10.15 on a Bootstrap based site in conjunction with Footables on my site. I've noticed on a new table that the images on the first and last page don't appear to be responsive however images on all the other pages are.
An example of this is the Players by Country table on the following page: https://completionist.io/Games/210970/the-witness
Resizing the browser with either the first or last page has images in the first column that don't resize dynamically but every other page appears to work fine. I can't see any differences in the classes I've applied to either. I'm using Chrome 60.0.3112.90.
Here's my configuration options:
var MobileHide = true;
var datatableOptions = {
order: [[ 4, "desc" ]],
serverSide: true,
searchDelay: 1000,
pageLength: 5,
autoWidth: false,
processing: true,
lengthChange: MobileHide,
searching: MobileHide,
info: MobileHide,
ajax: {
url: "/Games/TableData2",
type: "POST",
datatype: "JSON",
data:{ "AppID": "@Model.AppID", },
},
"columns": [
{ "data": "Country",
"render" : function (data, type, row, meta) {
var split = data.split(',');
return '<div class="card mapCard"><a href="/Region/' + split[0] +'"><img class=\"game-max-height clearfix img-responsive center-block\" src=\"/Content/Maps/' + split[0] + '.png\"/></a><div class="card-title mapCardTitle"><p class="text-white text-left nomargin hideOverflow" title="'+ split[1] +'"> '+ split[1] +'</p></div></div>';
} },
{ "data": "Average_Hours",
"class": "vert-align text-center",
"render" : function (data, type, row, meta) {
return '<h4 class="vert-align text-center"><strong>' + data + '</strong></h4>';
} },
{ "data": "Unplayed",
"class": "vert-align text-center",
"render" : function (data, type, row, meta) {
return '<h4 class="vert-align text-center"><strong>' + data + '% </strong></h4>';
} },
{ "data": "Total_Players",
"class": "vert-align text-center",
"render" : function (data, type, row, meta) {
return '<h4 class="vert-align text-center"><strong>' + data + '% </strong></h4>';
} },
{ "data": "Total_Playtime",
"class": "vert-align text-center",
"render" : function (data, type, row, meta) {
return '<h4 class="vert-align text-center"><strong>' + data + '% </strong></h4>';
} },
],
"fnDrawCallback": function(){
$('.table').footable({
"toggleColumn": "last",
"breakpoints": {
"tiny": 200 * multi,
"x-small": 510 * multi,
"small": 768 * multi,
"medium": 992 * multi,
"large": 1200 * multi,
"x-large": 1400 * multi
}
});
},
dom: "<'row'<'col-xs-6'l><'col-xs-6'f>>" +"<'row'<'col-sm-12'tr>>" +"<'row'<'col-sm-5'i><'col-sm-7'p>>",
};
Any ideas on how I might go about fixing this?
This question has an accepted answers - jump to answer
Answers
Attached is a screenshot taken in Chrome 59, which shows the table being responsive. I've only loaded the page, not tried to navigate through the table at all.
What browser is it you are using?
It might be worth trying to use Responsive rather than FooTable. I'm not sure how well it plays with DataTables - I've not tried that.
Allan
Thanks for checking it out Allan however if you navigate to another page in that table you'll see that the images resize. On that first page (and last) pages the images won't resize, no matter how small you make your browser window.
I've attached a screenshot showing a comparison between what the first/last and the rest of the pages look like to show what I'm talking about. As you can see the images are quite a bit smaller and, if you resize you browser, they'll react accordingly. The first and last pages don't react at all. Hope that helps a bit!
As I said in the original question I"m using Chrome 60.0.3112.90.
I'll have a look into the Responsive plugin (I think I used a previous version but that just added a scrollbar on small devices, didn't look great) but apart from this one weird issue I haven't had any other problems with Footables and Datatables.
Sorry - I missed the line where you said you were using Chrome.
Ah I see. The image itself isn't actually changing size is it? Its just the blue bottom border and when it gets small enough, the image itself is removed completely?
Could you remove
autoWidth: false,from your DataTables init?Thanks,
Allan
No worries at all!
The image and the blue border will change size dynamically at smaller browser window sizes, but only for pages that are the first or last. I've got Footables configured to progressively hide columns as the screen gets smaller but the images and their borders will always remain. The column hiding works perfectly but for the first and last pages, since the images don't resize dynamically, they end up overflowing their parent container at lower resolutions.
What's particularly weird is if I destroy the table and recreate it after I've shrunk my browser window it still has the same issue.
I've attached a screenshot with the autowidth false flag removed (from my local environment). This is after rendering at full size (1920 x 1080) and then resizing down. If I set my browser to a smaller resolution then all images then have the same fixed size on all pages.
If you are able to try it with the Responsive extension, that would be great. I've never tried mixing FooTables with DataTables and I suspect it might be quite unpredictable since they are both trying to control the table's DOM.
Allan
So I finally got around to implementing the responsive plugin to replace Footables and the issue persisted. However upon trying the solution on another table I found that the images responded as I expected so I dug a little deeper.
Long story short the text I had at the bottom of the map images was setting the parent div's width. Since the first and last pages both had countries in them with long names this prevented them from scaling. The issue just wasn't apparent for countries that had shorter names.
To get around this I added the following CSS to the text:
The attached image shows the result.
Seems it was neither Footables or Datatables that was to blame, it was all me!
I will be sticking with the Responsive plugin for Datatables rather than Footables however, just to avoid any potential issues in the future.
Thanks so much for your help, I've marked your last response as the answer as that's what led me to find out what the issue was.
Well found! Not an easy one to track down that.
Good to hear you've got it working now.
Allan