2

I have used Gridster 2 to create Widget in my angular application. but I have now a problem, in a widget there is a text area input field, but this input field can not be editable, because the whole widget is draggable.

I have try to use z-index, but it was not workling.

the code is as below: 

<gridster-item>

 <textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
</gridster-item>

How can I set my widget, so that I can edit this input field.

Best Regards,

Leo

user1938143
  • 1,022
  • 2
  • 22
  • 46

3 Answers3

1

You can use $event.stopPropagation() to prevent the drag while interacting with the text area.

Here is how you can use it:

<gridster-item>
  <div (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
   <textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
  </div>
</gridster-item>
wentjun
  • 40,384
  • 10
  • 95
  • 107
1

I still can use textarea in my dashboard.

I made a demo with textarea in dashboard.

You must check your css and dashboard options.

https://stackblitz.com/edit/my-angular-gridster2-textara

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
0

Try placing the textarea element inside a div with class: gridster-item-content.

<div class="gridster-item-content">
    <textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
  </div>
Mohammed Hameed
  • 73
  • 1
  • 10