2017-02-22 19 views
0

Я строю веб-приложение с использованием Угловая Материал/NgBootstrap/Bootstrap 4.Угловое 2 таблицы не отображаются должным образом на мобильном устройстве

У меня есть таблица, где пользователь может выполнять поиск данных в диапазоне дат и данные затем отображается пользователю в таблице.

Это все прекрасно работает в моем окружении рабочего стола, как показано на следующем рисунке, где отображается 12 наборов данных, и я могу прокрутить вниз

desktop

Однако для своего мобильного устройства, вид урезается выкл, и я не вижу каких-либо данных из таблицы

mobile

Есть кто-нибудь испытал что-то вроде этого, где поведение на мобильном устройстве выключена для Угловое 2 приложение или, возможно, bootsrap 4 приложения?

Ниже приведен код, который я использую для отображения таблицы

<table *ngIf="myArray.length > 0 && !isLoading" class="table table-striped table-hover"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Date</th> 
     <th>Hours</th> 
     <th>Status</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr *ngFor="let data of myArray" (click)="onRowClick(pastApproval)"> 
     <td>{{data.firstName}} {{data.lastName}}</td> 
     <td>{{data.workDate_epoch}</td> 
     <td>{{data.totalHours}}</td> 
     <td>{{data.status}}</td> 
    </tr> 
    </tbody> 
</table> 

Примечание. Если я использую браузер Chrome на моем телефоне, он показывает один ряд из 12. Kinda отличается от того, что показывает здесь, что я считаю из сафари (открыт из ссылки facebook)

+0

Это, очевидно, какая-то проблема с CSS. Прикрепите свой телефон к ПК и проверьте инструменты разработчика Chrome и попытайтесь найти css, который создает проблему. –

+0

Я никогда не знал, что вы можете отлаживать телефон. Не могли бы вы поделиться тем, как достичь этой или, возможно, ссылки на руководство? Спасибо – ErnieKev

+1

Да, конечно, вот ссылка: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ –

ответ

0

Это была проблема CSS. После того, как я изменил CSS для контейнера

height: 100%; 

в

display:block; 
overflow:auto; 

проблема исчезает

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

  • Нет связанных вопросов^_^