Странный CSS с MD-Badge: квадрат вокруг числа вместо круга - PullRequest
0 голосов
/ 29 января 2019

Я использую md-badge от angularJs, чтобы показать количество уведомлений, которые есть у пользователя.Но по какой-то причине стиль CSS (из модуля), вероятно, перезаписывается.Из документации, при использовании «md-bage = number» в теге, вы должны увидеть маленький кружок с #number внутри.В моем случае я вижу огромное число с квадратом вокруг него, я не могу понять, почему.

Вот HTML-код:

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

Вот HTML-код, сгенерированный, когдая проверяю страницу:

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

Вот официальная документация и как она должна выглядеть: https://jmouriz.github.io/angular-material-badge/demo/demo.html

И вот что я вижу: https://imgur.com/a/Dk12qK7

Есть идеи?Какую дополнительную информацию я должен отправить сюда?Спасибо!

Вот мой код файла gruntfile (его часть):

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: это заставило его работать)
Я скопировал angular-material-badge / angular-файл material-badge.css в папку в assets / css /, чтобы файл grunt мог поместить его в мой индексный файл.Когда я запускаю grunt dev, у меня есть индекс:

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

Все еще странный CSS в значке.
Решено, спасибо Джон =)

...