CODEWITHSUNDEEP
cssangularjsangular-materialmaterial-design
Leon
Leon

Reputation: 1881

Remove click behaviour from md-list-item (AngularJS Material)

In AngularJS Material, I want a simple list, not clickable items, just text with the correct spacing. I cannot make a non-clickable list!

I have looked over the documentation and I don't understand why is always adding class="md-clickable"... here is my code:

https://codepen.io/anon/pen/zaJpGY

<md-content class="acc-content">


          <md-list>
              <md-list-item>
                <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox>
                <p class="md-list-item-text">Agree to terms and conditions</p>
              </md-list-item>
              <md-list-item>
                <md-checkbox></md-checkbox><p>Provide personal details</p>
              </md-list-item>
              <md-list-item>
                <md-checkbox></md-checkbox><p>Bank details</p>
              </md-list-item>
          </md-list>


    </md-content>

How do I make these list items non-clickable?

Upvotes: 2

Views: 1495

Answers (2)

Adrian
Adrian

Reputation: 11

You can add class="md-no-proxy" to your md-list-item tag

See https://material.angularjs.org/latest/api/directive/mdListItem

<md-content class="acc-content">
      <md-list>
          <md-list-item class="md-no-proxy"> <!-- here -->
            <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox>
            <p class="md-list-item-text">Agree to terms and conditions</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Provide personal details</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Bank details</p>
          </md-list-item>
      </md-list>
</md-content>

Upvotes: 1

Zooly
Zooly

Reputation: 4787

A solution is to disable your list-item.

<md-content class="acc-content">
      <md-list>
          <md-list-item ng-disabled="true"> <!-- here -->
            <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox>
            <p class="md-list-item-text">Agree to terms and conditions</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Provide personal details</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Bank details</p>
          </md-list-item>
      </md-list>
</md-content>

Upvotes: 5

Related Questions