-1

I am trying to use the md-list

<md-list-item class="md-2-line">
        <md-icon md-svg-icon="communication:phone"></md-icon>
        <div class="md-list-item-text">
          <h3>Title</h3>
          <p>Text</p>
        </div>
      </md-list-item>

But I only get normal font and when I do a search in my code for all those classes, I can not find them (for example md-2-line is nowhere to be seen).

I did a bower install angular-material so I am assuming that in the components->list->js->list.css I should see these classes like in the scss on github.

What am I missing? Thanks

2 Answers 2

0

Maybe you take the code from the actual examples, but I think they are about the 0.9.0-RC2 version. When you install from bower you get the 0.8.3 as the latest available. In the changelog of the 0.9.0-rc1 and the 0.9.0-rc2 you can see some breaking changes in the md-list directive.

I didn't tested by myself, but hope it helps to solve your issue, try adding the following classes to your styles:

md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style, md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start; }
  md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text, md-list-item.md-3-line .md-list-item-text, md-list-item.md-3-line > .md-no-style .md-list-item-text {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 16px 0;
    text-overflow: ellipsis; }
    md-list-item.md-2-line .md-list-item-text.md-offset, md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, md-list-item.md-3-line .md-list-item-text.md-offset, md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
      margin-left: 56px; }
    md-list-item.md-2-line .md-list-item-text h3, md-list-item.md-2-line > .md-no-style .md-list-item-text h3, md-list-item.md-3-line .md-list-item-text h3, md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
      margin: 0 0 6px 0;
      line-height: 0.75em; }
    md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > .md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
      font-weight: 400;
      margin: 10px 0 5px 0;
      line-height: 0.75em; }
    md-list-item.md-2-line .md-list-item-text p, md-list-item.md-2-line > .md-no-style .md-list-item-text p, md-list-item.md-3-line .md-list-item-text p, md-list-item.md-3-line > .md-no-style .md-list-item-text p {
      margin: 0 0 0px 0;
      line-height: 1.6em; }

md-list-item.md-2-line > .md-avatar:first-child, md-list-item.md-2-line > .md-no-style > .md-avatar:first-child {
  margin-top: 12px; }
md-list-item.md-2-line > md-icon:first-child, md-list-item.md-2-line > .md-no-style > md-icon:first-child {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center; }
md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 19px; }
0

md-list-item's css classes md-2-line md-3-line belongs to 0.9.0 -ver. At first I have also the similar problem after I update latest -ver evrything worked as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.