Блог

Главная - Вопросы по программированию - Как настроить текстовое поле в Gridster для редактирования

Как настроить текстовое поле в Gridster для редактирования

#angular #angular-gridster2

#angular #angular-gridster2

Вопрос:

Я использовал Gridster 2 для создания виджета в моем приложении angular. но теперь у меня проблема, в виджете есть поле ввода текстовой области, но это поле ввода недоступно для редактирования, потому что весь виджет можно перетаскивать.

Я попытался использовать z-index, но это не сработало.

код выглядит следующим образом: 

 <gridster-item>

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

Как я могу настроить свой виджет, чтобы я мог редактировать это поле ввода.

С наилучшими пожеланиями,

Leo

Комментарии:

1. Хм .. отображается ли текстовая область и доступна ли она для просмотра?

Ответ №1:

Вы можете использовать $event.stopPropagation() , чтобы предотвратить перетаскивание при взаимодействии с текстовой областью.

Вот как вы можете это использовать:

 <gridster-item>
  <div (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
   <textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
  </div>
</gridster-item>

Ответ №2:

Я все еще могу использовать текстовое поле на своей панели инструментов.

Я сделал демонстрацию с текстовой областью в dashboard.

Вы должны проверить свои параметры CSS и панели мониторинга.

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

Ответ №3:

Попробуйте поместить элемент textarea внутри div с классом: gridster-item-content.

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