Hiding buttons, icons and texts based on resolution using Angularjs

Question

I have become decent at responsive html (bootstrap) but now I have to remove elements based on resolution.

Look at browser vs. mobile:

Based on resolution, some buttons should lose the md-icon others lose their text, and a few buttons should be hidden completely.

How can I do that with angular and CSS?

• hide icon but leave text,

• hide text but leave icon,

• hide button completely

Here is some of my code

<!--Save Invoice-->
<td style="width:35%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
        <md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
        SAVE
    </button>
</td>

<!--Pay Invoice-->
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
    <button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
        <md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
        PAY
    </button>
</td>

<!--Print Invoice-->
<td style="width:5%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
        <md-icon class="material-icons book-material" aria-label="Delete">print</md-icon>
    </button>
</td>

Answer 1

You can use Bootstrap's builtin classes like

.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg

Example:

<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
    <md-icon class="material-icons book-material hidden-sm" aria-label="Save">save</md-icon>
    <span class="hidden-xs">SAVE</span>
</button>

In the above code 'md-icon' will hide in small screens and 'SAVE' text will hide in extra-small screens.

You can refer those classes here: http://getbootstrap.com/css/#responsive-utilities

Answer 2

For Hide Icon

Write in Css

@media screen and (max-width:768px)
{
     .material-icons  {display:none;}
}

For Hide Text

Html Code

<td style="width:35%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
        <md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
        <span class="btntext">SAVE</span>
    </button>
</td>

css

@media screen and (max-width:768px)
{
         .btntext  {display:none;}
}

For Hide Button

In Css

 @media screen and (max-width:768px)
    {
             .book-button  {display:none;}
    }

Answer 3

Save Invoice

<td style="width:35%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
        <md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
        <span class="hide-xs">SAVE</span>
    </button>
</td>

Pay Invoice

<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
    <button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
        <md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
       <span class="hide-xs"> PAY</span>
    </button>
</td>

Print Invoice

<td style="width:5%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
        <md-icon class="material-icons book-material" aria-label="Delete"><span class="hide-xs">print</span></md-icon>
    </button>
</td>