miguelcobain / ember-paper

The Ember approach to Material Design.
http://miguelcobain.github.io/ember-paper
MIT License
889 stars 332 forks source link

Secondary icon overlap text #602

Open liko28s opened 7 years ago

liko28s commented 7 years ago

Hi guys, When you create a list with avatars and secondary button, the secondary button overlaps the text image I'm using this code

{{#paper-list}}
  {{#paper-subheader}}Equipos{{/paper-subheader}}
  {{#each model as |team|}}
    {{#paper-item class="md-3-line" onClick=(action "viewTeamDetail" team.id) as |control|}}
        <img src={{team.image}} alt={{item.name}} class="md-avatar">
        <div class="md-list-item-text">
            <strong><h3><b>{{team.name}}</b></h3></strong>
            <em><h4>Entrenador: {{team.coach}}</h4></em>
            <p>{{team.description}}</p>
        </div>
        {{#control.button secondary=true iconButton=true raised=true accent=true}}
          {{paper-icon "favorite"}}
        {{/control.button}}
    {{/paper-item}}
  {{/each}}
{{/paper-list}}

Any solutions? thanks

panthony commented 7 years ago

Same issue here, the exemple on both docs does not generate the same markup.

// paper

 <div class="md-no-style md-list-item-inner md-ink-ripple">
  <p>Clicking the button to the right will fire the secondary action</p>
  <button type="button" tabindex="0" id="ember740" class="md-default-theme md-button md-secondary ember-view md-ink-ripple">
    More Info
    <div class="md-ripple-container"></div>
    </button>
    <div class="md-ripple-container"></div>
</div>

// angular

<md-list-item class="secondary-button-padding md-no-proxy md-with-secondary _md" role="listitem">
  <p>Clicking the button to the right will fire the secondary action</p>
  <div class="md-secondary-container">
    <button class="md-secondary md-button md-ink-ripple" type="button">
      <span>More Info</span>
      <div class="md-ripple-container"></div>
    </button>
  </div>
</md-list-item>