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>

Ganesh Munisifreddy · Accepted Answer · 2017-08-03 05:53:04Z

3

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

answered Aug 3, 2017 at 5:53

Ganesh Munisifreddy

4007 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prashant kushwah · Accepted Answer · 2017-08-05 09:18:48Z

1

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;}
    }

edited Aug 5, 2017 at 9:18

answered Aug 3, 2017 at 5:31

prashant kushwah

4613 gold badges6 silver badges18 bronze badges

Comments

Tummala Krishna Kishore · Accepted Answer · 2017-08-03 07:15:45Z

-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>

edited Aug 3, 2017 at 7:15

Tummala Krishna Kishore

8,2814 gold badges36 silver badges52 bronze badges

answered Aug 3, 2017 at 5:37

Rahul771

13 bronze badges

1 Comment

Syed Faizan Over a year ago

answer isnt clear and doesn't provide a code example or useful links

Collectives™ on Stack Overflow

Hiding buttons, icons and texts based on resolution using Angularjs

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related