Concealing elements such as buttons, icons, and text dynamically with AngularJS depending on screen resolution

I have mastered responsive html using Bootstrap, but now I need to dynamically remove elements based on screen resolution.

Let's compare browser view versus mobile view:

https://i.sstatic.net/q53aa.jpg

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

How can I achieve this using Angular and CSS?

  • Hide icon but keep text visible

  • Hide text but keep icon visible

  • Completely hide the button

Below is an excerpt 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="Payment">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="Print">print</md-icon>
    </button>
</td>
htmlcssangularjs

Answer №1

If you want to hide elements based on screen size, you can take advantage of Bootstrap's pre-made classes such as 

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

For instance:

<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 example above, the 'md-icon' will be hidden on small screens and the 'SAVE' text will be hidden on extra-small screens.

You can find more information about these classes here: http://getbootstrap.com/css/#responsive-utilities

Answer №2

To Conceal Icon

Use Css

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

To Hide Text

In Html

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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoiding page breaks in Puppeteer PDFs

I'm facing an issue with my HTML code where my tabular data is splitting across two pages when converting to PDF using puppeteer. I want to prevent the table from splitting across pages. <table> <tbody></tbody> </table> Despit ...

htmlcssnode.jspuppeteerpage-break-inside

Utilizing SEO and incorporating special characters like !# in a website's URL

I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...

javascripthtmlajaxseo

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

jquerycss

Using React and TypeScript to enable file uploads

Seeking assistance in creating a basic single select upload component. When I click a button that contains a hidden input field, the file dialog opens and allows me to choose a file. The placeholder then changes to display the selected file name along with ...

javascripthtmlreactjsreact-hooksmaterial-ui

Increasing the size of a ModelForm field in Django

I'm working with a ModelForm that includes a description field. Django automatically generates the field at its standard size, but I want to adjust it to be larger. However, my attempts to find a solution through Google haven't been successful. ...

htmlcssdjango

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

javascriptjqueryhtmlcss

The changing perspective in relation to the current position of a background

I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can ...

javascriptjqueryhtmlcss

Upon logging out, the user retains the ability to access the protected page

I have encountered an issue where despite adding a session and implementing code to prevent users from accessing a page after logout, they are still able to access the previous page. Below is the code snippet: Login form code: <form id="form1" name="f ...

phphtmlmysql

Tips for aligning a row of images to the right in Bootstrap 4

I have several images that I want to display on the right side in a block. Here is what I attempted: <div class="row" > <div class="float-right"> <img src="1.png"/> <img src="2.jpg"/> ...

htmlcssbootstrap-4alignment

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

javascripthtmlarrayssortinglocal-storage

Restricting the height of a column in Bootstrap 4 to create a more compact design

Currently, I have an element that contains a few columns. The issue is that all columns end up being the same height as the tallest one. What I want is to set a minimum height for one specific column, #colB, and have the other two columns scroll vertically ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Issue with X overflow visible at the right edge of the webpage (Vue.js and Tailwind CSS)

RESOLVED There is a strange white overflow on the right side of my responsive website that appears and becomes smaller as I scroll down the page. I can't seem to figure out why this is happening. None of the elements are overflowing into that space. ...

cssvue.jsresponsive-designtailwind-css

Unable to mouse over and select the value from the dropdown box

In order to choose a value from the drop-down menu, you must first mouse over to open the pop-up. I currently use sendKeys("Body > Abdomen"). Can someone please advise on the correct method for selecting a value from this type of drop-down box? Here i ...

htmlxpathseleniumselenium-webdriver

How to adjust the width of nested divs in Nuxt.js/Vue.js to align with a specific container in the stack

Is there a way to handle varying image widths in Nuxt without compromising the layout? I have an image component that needs to adjust for different screen sizes, and I want the title and description to always match the width of the image. Here's what ...

javascriptcssvue.jsnuxt.js

Changing both image border and text at the same time when hovering- how can this be done

I have taken on the challenge of creating a Netflix Clone as a personal project. In my version, I want the border around the image and the user's name to both highlight when hovered over in the Netflix Profiles section. However, despite trying for o ...

javascripthtmlcsshover

In pursuit of increased speed

When using $routeProvider in Angular, I have noticed that every time I navigate to a specific route, I see the following logs in the console: XHR finished loading: "http://localhost:8080/root/partials/view1.html". XHR finished loading: "http://localhost:8 ...

javascripthttpangularjs

Retrieve specific information from checkboxes within a form

I'm working on a form that includes multiple checkboxes populated with data from a JSON file using ng-repeat. After submitting the form, I need to retrieve the data from the checked checkboxes. How can I accomplish this in my controller after the form ...

javascriptformsangularjscheckbox

Javascript string manipulation operation

Is it possible to extract only the characters 'ABCD' from a string like 'ABCD150117T15' using JavaScript? I am interested in removing everything after 'ABCD' in this example, specifically excluding the first occurrence of a n ...

javascriptangularjs

Do angular controllers created within an ng-repeat section share the same instance?

Trying to get a section of HTML and its associated controller to repeat, I've noticed that the controllers appear to be linked as a single object. This means that changes made to one controller affect all instances. Is this behavior correct or am I mi ...

angularjsangularjs-ng-repeat

Tips for sending an array to an object in AngularJS

If we consider the JSON data as follows: { "todo" : "Dinner", "user" : [ { "name" : "", "password" : "" } ], "notes : "some notes" } And we aim to create an object based on this JSON. In AngularJS, initially we can define the ...

angularjs