CODEWITHSUNDEEP
cssangularjshtml-table
Janey
Janey

Reputation: 1310

Responsive table design breaks in Safari iPhone, Mac

I have an angularJS app and I display data using ng-table. In order to make the tables responsive I have done the following, which works correctly in chrome, but not in safari or edge. Does anyone have any ideas?

How it looks in Chrome:

chrome screen grab

How it looks in Safari:

safari screen grab

HTML:

    <div class="table-mob-cards">   
    <table class="table table-striped contactPeople-table" ng-table="$ctrl.tableParams">
        <tr class="drillable" ng-repeat="p in $data">
          <td data-title="name" filter="{FullName:'text'}" sortable="'FullName'" data-rth-label="Name">{{ p.FullName }}</td>
          <td data-title="jobtitle" filter="{JobTitle:'text'}" sortable="'JobTitle'" data-rth-label="Job Title">{{ p.JobTitle }}</td>
          <td data-title="phone" filter="{primaryphone:'text'}" sortable="'primaryphone'" data-rth-label="Primary Phone">{{ p.primaryphone }}</td>
          <td class="text-center" data-title="entry" sortable="'Authorised'" data-rth-label="entry">
            <md-checkbox ng-model="p.Authorised" disabled aria-label="authorised"></md-checkbox>
          </td>
          <td class="text-center" data-title="account" sortable="'AuthorisedForAccount'" data-rth-label="account">
            <md-checkbox ng-model="p.AuthorisedForAccount" disabled aria-label="AuthorisedForAccount"></md-checkbox>
          </td>
          <td class="text-center" data-title="primary" sortable="'PrimaryContact'" data-rth-label="primary">
            <md-checkbox ng-model="p.PrimaryContact" disabled aria-label="PrimaryContact"></md-checkbox>
          </td>
        </tr>
    </table>
</div>

CSS:

@media screen and (max-width: 600px) {
.table-mob-cards {
    /* Force table to not be like tables anymore */
    thead tr {
        display: none;
    }

    tr {
        margin: 0 0 1rem 0;
        border-radius: 5px !important;
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    }

    table td {
        /* Behave  like a "row" */
        display: flex;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        text-align: center !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        overflow: hidden;
        font-size: 12px;
        padding-left: 35% !important;
        min-height: 25px;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        word-break: break-all !important;
        white-space: normal !important;
        md-checkbox {
            margin-top: 0px !important;
            margin-bottom: 0px;
        }
    }



    table td::before {
        /* Now like a table header */
        position: absolute;
        font-weight: bold;
        font-size: 12px;
        /* Top/left values mimic padding */
        content: attr(data-rth-label);
        text-transform: capitalize;
        background-color: #ddd;
        top: 0%;
        left: 0%;
        width: 30%;
        height: 100%;
        padding: 3px !important;
        text-align: center !important;
        word-break: normal !important;
        white-space: normal !important;
    }

}

If I comment out 

display: flex;

from table td it also breaks in chrome. However I cant see why this wouldn't work in Safari or Edge.

Any ideas would be great, thanks :)

Upvotes: 0

Views: 1604

Answers (1)

Janey
Janey

Reputation: 1310

I fixed my issue... I hope this can help someone else.

This post suggested adding <!DOCTYPE html> before <html> at the top of your html.

I already had this BUT I found that because of some include files in the app, I had 2 divs declared before <!DOCTYPE html> which was causing the problem.

Upvotes: 3

Related Questions