Weird css with md-badge: square around the number instead of a circle

I'm using md-badge from angularJs to show the number of notifications a user has. But for some reason, css style (from the module) is probably being overwritten. From the documentation, when using "md-bage=number"in a tag, you should see a small circle with the #number inside. In my case, I see a huge number with a square around it, I can't understand why.

I'm using md-badge from angularJs to show the number of notifications a user has. But for some reason, css style (from the module) is probably being overwritten. From the documentation, when using "md-bage=number"in a tag, you should see a small circle with the #number inside. In my case, I see a huge number with a square around it, I can't understand why.

Here is the html code:

<icon
  click-on="vm.clickOnNotifications"
  tooltip=vm.tooltip
  icon="'notifications'"
  md-badge={{vm.notificationsCounter}}
  md-badge-fill="white"
  md-badge-color=":red"
>
</icon>

Here is the html code generated when i inspect the page:

<div class="md-badge" style="position: absolute; color: rgb(244, 67, 54); background-color: white; display: initial; left: 397px; top: 29px;">3</div>

Here is the official documentation and what it should look like: https://jmouriz.github.io/angular-material-badge/demo/demo.html

And here is what I'm seeing: https://imgur.com/a/Dk12qK7

Any idea? What extra info should I send here? Thanks!

Here is my gruntfile code (part of it):

injector: {
      options: {
        ignorePath: 'static/'
      },
      dev: {
        files: {
          'static/index.html': [
            'static/app/app.js',
            'static/app/app.config.js',
            'static/app/**/*Module.js',
            'static/app/**/*Route.js',
            'static/app/**/*Ctrl.js',
            'static/app/**/*Service.js',
            'static/app/**/*Directive.js'
          ]
        }
      },
      production: {
        files: {
          'static/index.html': [
            'static/app/assets/css/**/*.css',
            'static/app/assets/js/*.js'
          ]
    }
  }
},

(obs: this made it work)

I have copied angular-material-badge/angular-material-badge.css file to a folder in assets/css/ so grunt file can put it in my index file. When i run grunt dev, I have my index like:

<!-- injector:css -->
<link rel="stylesheet" href="/app/assets/css/angular-loading-bar/loading-bar.css">
<link rel="stylesheet" href="/app/assets/css/angular-material-badge/angular-material-badge.css">
<link rel="stylesheet" href="/app/assets/css/angular-material-data-table/md-data-table.css">
<link rel="stylesheet" href="/app/assets/css/angular-material-icons/angular-material-icons.css">
<link rel="stylesheet" href="/app/assets/css/angular-material/angular-material.css">
<link rel="stylesheet" href="/app/assets/css/style.css">

Still weird css in the badge.

Solved, thanks John =)

Angular JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development




How to CSS Centering for Angular

How to CSS Centering for Angular

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners. But with the advent of Flexbox, CSS centering became easier and clearer than ever.

In this tutorial, we'll learn how to center elements in CSS and Angular 8 using the modern Flexbox layout.

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners.

But with the advent of Flexbox, CSS centering became easier and clearer than ever.

We'll make use of Stackblitz for our Angular project.

Horizontal Centering

Let's start with horizontal centering. Open the src/app/app.component.html file and add the following <div>:

<div class="center">
  <h1>Hello Angular 8!</h1>
</div>

We add a div with a center class. Inside it, we add an <h1> tag.

Next, open the src/app/app.component.css file and add the center class with the following styles:

.center {
  display: flex;
  justify-content: center;
}

That's it. our content is horizontally centered by simply making the div a flex container and using the justify-content property. Here is a screenshot:

Vertical Centering

Now, let's see how we can center the content vertically using Flexbox.

It's also easy to achieve that using Flexbox by simply adding align-items: center.

Let's first add the following styles to change the color and height of the containing div so we can see the content clearly centered vertically:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

This is the result:

Now, let's apply the vertical centering:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
  align-items: center;
}

This is the result:

This will center any elements inside the div. If you would like to center specific elements, you can use align-self: center, instead, on the element.

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

.center h1{
align-self: center;
}

If you need to center on the whole page, you can simply give the div the same height as the page:

.center {
display: flex;
background-color: #ff1124;
justify-content: center;
height: 100vh;
}

.center h1{
align-self: center;
}

This is a screenshot:

Conclusion

In this quick example, we've seen how we can center elements in CSS horizontally and vertically using Flexblox which provides easy and clear ways to achieve that without resorting to old CSS tricks.

This example was demonstrated with an Angular 8 project but these tricks are not tied to Angular in any way.

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others

Further reading

☞ What’s New in Angular 8.0

☞ Angular 8 is coming

☞ Angular 8 Tutorial - User Registration and Login Example

☞ Angular 8 HttpClient & Http Tutorial – Build and Consume RESTful API

☞ Understanding Angular 8's Differential Loading

☞ Angular & NodeJS - The MEAN Stack Guide

☞ Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

☞  Angular 8 Node & Express JS File Upload

☞ Angular Authentication Tutorial for Beginners


Originally published on techiediaries.com