CODEWITHSUNDEEP
angular-material
whamsicore
whamsicore

Reputation: 8700

Angular Material make clickable md-list-item text selectable

I want to make the text in the md-list-item selectable. However, I have discovered that when ng-click is set for the element the whole row becomes a button, making the user unable to select any of the text on the element. Any ideas on how I can override this functionality?

enter image description here

Here is the code:

enter image description here

Upvotes: 3

Views: 6000

Answers (2)

Edward Liang
Edward Liang

Reputation: 100

Angular Material didn't specify this behavior in docs. But add ng-click="false" on the md-list-item also works.

<md-list-item ng-click="false">
  <span>...</span>
  <a ng-click="f()">...</a>
</md-list-item>

Upvotes: 2

sdfacre
sdfacre

Reputation: 1273

This is going to be ugly. When ng-click appear, it generates a button on top of each row and also add 'user-select: none' to each field. That's why it is not selectable.

If you really want to make it selectable, you can set z-index on the field to bring it to the front and set user-select: text to make it selectable. Also, it will be better to use span rather than div, as span has dynamic width.

something like should work: -

<md-list-item xxxx>
   <span style="z-index:10000;user-select:text;"> Return </span>
</md-list-item>

see last section of the example http://codepen.io/anon/pen/WwdMwr

Upvotes: 5

Related Questions