CODEWITHSUNDEEP
javascriptcssangularjshtml
Lugaru
Lugaru

Reputation: 1460

Angular: switch HTML depending on screen resolution

How to change HTML layout depending on the screen resolution.

Situation: I have a table with 10 columns, but if the browser width is smaller than 900px it looks ugly. I would like to change the HTML layout (merge 3 columns to one) when the size is or less than 900px.

Upvotes: 1

Views: 3207

Answers (3)

theoni.n
theoni.n

Reputation: 61

I have solved this based on a controller that changes a value based on width, I dont' remember why using media queries wasn't an option but here it is:

angular.module('app')
.controller('mobileController', function ($scope, $window) {

    var mobileWidth = 768;

    $scope.isMobile = function(){
        $scope.mobile = false;
        if(document.body.clientWidth <= mobileWidth){
            $scope.mobile = true;
        }
    };

    angular.element($window).bind('load resize', function(){
        $scope.$apply(function() {
            $scope.isMobile();
        });
    });
});

you can then use ng-show based on the $scope.mobile. hope this helps

Upvotes: 0

davidanton1d
davidanton1d

Reputation: 329

By using media queries, you could hide some of the table columns:

HTML:

<table>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
</table>

CSS:

@media screen and (min-width: 900px) {
    .show-under-900px {
        display: none;
    }
    .hide-under-900px {
        display: table-cell;
    }
}
@media screen and (max-width: 900px) {
    .show-under-900px {
        display: table-cell;
    }
    .hide-under-900px {
        display: none;
    }
}

Upvotes: 1

Laxmi Salunkhe
Laxmi Salunkhe

Reputation: 509

Use Bootstrap responsive grid classes. It will automatically handle responsiveness. If you want to use custom grid then you can use angular ng-class attribute to achieve responsiveness.

Upvotes: 1

Related Questions