Проблема с отзывчивыми таблицами (фундамент 5) в приложении Rails

Я реализую некоторые таблицы в своем приложении Rails 4. Для этого я использую среду ZURB Foundation 5.Проблема с отзывчивыми таблицами (фундамент 5) в приложении Rails

Проблема, с которой я сталкиваюсь, находится на мобильной версии таблицы. В представлениях браузера и Tablet таблица работает так, как ожидалось ... Однако на дисплее мобильного телефона таблица показывает столбец 1 дважды, затем прокручивает остальные столбцы (это прекрасно ... проблема - это только дублированный первый столбец, и я не знаете, как избавиться от этого вообще ??

Таблица Код:

<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 имеет следующие в заголовке:

<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 As per Foundation 
    <%= javascript_include_tag "responsive-tables" %> -- Added As per Foundation 
    </head>

источник

2015-08-16 Shawn Wilson

У меня была такая же проблема. Я не эксперт, и я ожидаю, что может быть более аккуратное решение, чем это, но это сработало для меня. Проблема заключалась в том, что Turbolinks вызывал вызов JS-кода более одного раза. Я редактировал файл responsive_tables.js следующим образом. Обратите внимание на глобальную переменную switched, которую вы можете переименовать по всему этому коду, если вы считаете, что может столкнуться с другим кодом на вашем сайте:

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]); 
    }); 
}

источник

2015-08-28 21:46:12

Проблема с отзывчивыми таблицами (фундамент 5) в приложении Rails

ответ

Смежные вопросы