Badges on buttons inverted when nested within a md-list.

[dylanbaxter]

Steps to reproduce

Nesting components as the documents suggest. See full example: https://codesandbox.io/s/jjyqk29jlv

Which browser?

Tested with Firefox and Chrome browsers. Vue and Vue-Material are both latest.

What is expected?

Badges should display top right of button. Setting md-position="top" has no effect.

What is actually happening?

The badge and buttons positions appear to be inverted, i.e. the badge is low where the button icon should be and the button icon is top right where the badge should be. I have tried other nestings and messed with CSS a little but my foo is not good enough.

Reproduction Link

https://codesandbox.io/s/jjyqk29jlv

I'll keep messing with it and submit a PR if I figure anything out. Many thanks to all who have contributed to this fantastic library. I love it!

[dylanbaxter]

This is really an issue of semantics and for my application will use something the following to work around for now:

          <div v-if="!menuVisible">
            <br />
            <div>
              <md-badge md-content="3" md-dense>
                <md-button class="md-icon-button" to="/Message/List">
                  <md-icon>message</md-icon>
                </md-button>
              </md-badge>
            </div>
            <br />
            <div>
              <md-badge md-content="1" md-dense>
                <md-button class="md-icon-button" to="/Document/List">
                  <md-icon>description</md-icon>
                </md-button>
              </md-badge>
            </div>
            <br />
            <div>
              <md-badge md-content="1" md-dense>
                <md-button class="md-icon-button" to="/Service/List">
                  <md-icon>build</md-icon>
                </md-button>
              </md-badge>
            </div>
          </div>

          <md-list v-if="menuVisible">
            <md-list-item>
              <md-icon>message</md-icon>
              <span class="md-list-item-text">
                <router-link to="/Message/List">Messages</router-link>
              </span>
              <md-badge class="md-primary md-square" md-content="3" />
            </md-list-item>
            <md-list-item>
              <md-icon>description</md-icon>
              <span class="md-list-item-text">
                <router-link to="/Document/List">Documents</router-link>
              </span>
              <md-badge class="md-primary md-square" md-content="1" />
            </md-list-item>
            <md-list-item>
              <md-icon>build</md-icon>
              <span class="md-list-item-text">
                <router-link to="/Service/List">Service Requests</router-link>
              </span>
              <md-badge class="md-primary md-square" md-content="1" />
            </md-list-item>
          </md-list>

[dognoir]

The problem is with the css styling:

.md-list-item-content .md-badge {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0;
}

When I remove those in browser debug, the badge placement is as expected.

[dognoir]

My work around was to use my own divs and the md-classes. I fix the styling inline on the div itself.

<md-list-item>
    <div style="position:relative;">
      <md-icon>notifications</md-icon>
      <div class="md-badge md-theme-default md-position-top md-dense" style="position:absolute;top:-5px;right:-5px;">
         {{ notification_count }}
      </div>
    </div>
    <span class="menu-text">Notifications</span>
    <md-tooltip md-direction="right">Notifications</md-tooltip>
</md-list-item>