mdList: how to make md-list-item item row height smaller

[kasajian]

Currently, I have to

When I have simple markup like this:

<md-list ng-controller="ListCtrl" ng-cloak="" class="listdemoListControls" ng-app="MyApp">
  <md-list-item ng-repeat="message in messages">
      <md-checkbox class="green" ng-model="message.selected">
    </md-checkbox> 
       <p style="" >{{message.title}}</p> 
  </md-list-item>
</md-list>

There's unnecessary gaps. The only way I was able to figure out how to fix it (after about 4 hours of fighting with css, is by adding the following style:

<style>
md-list-item, md-list-item .md-list-item-inner, md-checkbox {
    min-height: 100%;
}
</style>

here's a pen: http://codepen.io/kasajian/pen/XdrrQY

Is there a more proper way to do this?

[devversion]

There is no easy way to get that running, we only support the default list styles, which are specified in the official specs - https://www.google.com/design/spec/components/lists.html#lists-specs

[ThomasBurleson]

So the default styling is:

md-list-item, md-list-item .md-list-item-inner {
  min-height: 48px;
  height: auto;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

and the override:

md-list-item, md-list-item .md-list-item-inner {
    min-height: 20px;
    height: 25px;
}

[ThomasBurleson]

Thank you for the high-density styling question.

[kasajian]

Thank you. Wish I knew what that "CSS: High Density" label meant

[kasajian]

Now broken with version on master. See continuation: #7346