html5 - Issue with responsive tables (foundation 5) in Rails app -
i implementing tables in rails 4 app. using zurb foundation 5 framework this.
the issue encountering on mobile version of table. in browser , tablet views table works expected... on mobile phone displays table shows column 1 twice scrolles through rest of columns (thats fine... issue duplicated first column , not sure how rid of @ all??
table code:
<table class="responsive"> <thead> <tr> <th width="150">test test 1</th> <th width="150">test test 2</th> <th width="150">test test 3</th> <th width="150">test test 4</th> <th width="150">test test 5</th> <th width="150">test test 6</th> </tr> </thead> <tbody> <tr> <td>answer 1</td> <td>answer 2</td> <td>answer 3</td> <td>answer 4</td> <td>answer 5</td> <td>answer 6</td> </tr> </tbody> my app layout.html.erb has following in header:
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%= content_for?(:title) ? yield(:title) : "patrolpro r.m.s - demo" %></title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "vendor/modernizr" %> <%= javascript_include_tag "application", 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <%= stylesheet_link_tag "responsive-tables" %> -- adeed per foundation <%= javascript_include_tag "responsive-tables" %> -- added per foundation </head>
i had same problem. i'm not expert , expect there may neater solution - has worked me. problem turbolinks causing js code called more once. edited responsive_tables.js file following. note global variable switched may rename throughout code if think might clash other code on site:
var switched = false; $(document).ready(function() { var updatetables = function() { if (($(window).width() < 767) && !switched ){ switched = true; $("table.responsive").each(function(i, element) { splittable($(element)); }); return true; } else if (switched && ($(window).width() > 767)) { switched = false; $("table.responsive").each(function(i, element) { unsplittable($(element)); }); } }; $(window).load(updatetables); }); $(window).bind('page:change', function() { switched = false; var updatetables = function() { if (($(window).width() < 767) && !switched ){ switched = true; $("table.responsive").each(function(i, element) { splittable($(element)); console.log('here'); }); return true; } else if (switched && ($(window).width() > 767)) { switched = false; $("table.responsive").each(function(i, element) { unsplittable($(element)); }); } }; if (!switched) { updatetables(); } }); function splittable(original) { original.wrap("<div class='table-wrapper' />"); var copy = original.clone(); copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none"); copy.removeclass("responsive"); original.closest(".table-wrapper").append(copy); copy.wrap("<div class='pinned' />"); original.wrap("<div class='scrollable' />"); setcellheights(original, copy); } function unsplittable(original) { original.closest(".table-wrapper").find(".pinned").remove(); original.unwrap(); original.unwrap(); } function setcellheights(original, copy) { var tr = original.find('tr'), tr_copy = copy.find('tr'), heights = []; tr.each(function (index) { var self = $(this), tx = self.find('th, td'); tx.each(function () { var height = $(this).outerheight(true); heights[index] = heights[index] || 0; if (height > heights[index]) heights[index] = height; }); }); tr_copy.each(function (index) { $(this).height(heights[index]); }); }
Comments
Post a Comment