Я строю веб-приложение с использованием Угловая Материал/NgBootstrap/Bootstrap 4.Угловое 2 таблицы не отображаются должным образом на мобильном устройстве
У меня есть таблица, где пользователь может выполнять поиск данных в диапазоне дат и данные затем отображается пользователю в таблице.
Это все прекрасно работает в моем окружении рабочего стола, как показано на следующем рисунке, где отображается 12 наборов данных, и я могу прокрутить вниз
Однако для своего мобильного устройства, вид урезается выкл, и я не вижу каких-либо данных из таблицы
Есть кто-нибудь испытал что-то вроде этого, где поведение на мобильном устройстве выключена для Угловое 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)
Это, очевидно, какая-то проблема с CSS. Прикрепите свой телефон к ПК и проверьте инструменты разработчика Chrome и попытайтесь найти css, который создает проблему. –
Я никогда не знал, что вы можете отлаживать телефон. Не могли бы вы поделиться тем, как достичь этой или, возможно, ссылки на руководство? Спасибо – ErnieKev
Да, конечно, вот ссылка: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ –