Я работаю над приложением PHP / Laravel, и на одной из страниц есть форма, отображающая таблицу с информацией о различных транзакциях, совершаемых через веб-сайт.
Один из столбцов в таблиценазывается «Контакт» и отображает контактные данные лица, ответственного за эту транзакцию.Каждая ячейка в этом столбце также отображает кнопку «Редактировать», которая открывает диалоговое окно, позволяющее пользователю добавлять / удалять / изменять контакт, данные которого будут отображаться для этой транзакции.
В настоящее время, когда пользовательнажимает кнопку «Редактировать», и отображается диалоговое окно, значок кнопки «Редактировать» изменяется на «X», чтобы позволить им закрыть диалоговое окно, но само диалоговое окно отображается немного ниже этого местоположения на странице, поэтому кажется, чточисло пользователей отсутствует, поэтому они закрывают диалоговое окно.
Я хочу добавить кнопку «X» в само диалоговое окно, чтобы пользователи могли закрыть его, щелкнув по нему тоже.
HTML-код, отображающий эту ячейку и диалоговое окно таблицы:
<td data-heading="Provisional Contact" class="provContactCell table__priority-column" id="fixPayerName">
<i class="icon icon-pencil" [class.icon-close-selected]="payer.showProvContactSelector" (click)="toggleProvContactSelector(payer)">
</i>
...
<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
<h3>Provisional Contacts & Managers</h3>
<button class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayer)"></button>
<p>Check/un-check which contacts should be provisional contacts and managers.</p>
<div class="provContacts">
...
</div>
</div>
</div>
</td>
Я пытался добавить кнопку сразу после тегов <h></h>, но при просмотре страницы и открытии диалогового окна в браузере, кнопка отображается под заголовком диалога.Если я пытаюсь поместить кнопку в теги <h></h>, я получаю ошибки в консоли, и страница загружается неправильно ...
Ошибки консоли:
vendor.bundle.js? ver = 1486951446: 54441 Ошибка ОШИБКА: Uncaught (в обещании): Ошибка: Ошибка загрузки общего блока данных.
Ошибка: Ошибка загрузки общего блока данных.в HTMLScriptElement.onScriptComplete (inline.bundle.js? ver = 1432283697: 104) в HTMLScriptElement.wrapFn (polyfills.bundle.js? ver = 450735834: 6545) в ZoneDelegate.webpackJsonp ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js? ver = 450735834: 5800) в Object.onInvokeTask (vendor.bundle.js? ver = 1486951446: 57733) в ZoneDelegate.webpackJsonp ../ node_modules / zone.js/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js? ver = 450735834: 5799) в Zone.webpackJsonp ../ node_modules / zone.js / dist / zone.js.Zone.runTask (polyfills.bundle.js?ver = 450735834: 5567) в ZoneTask.webpackJsonp ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [as invoke]
Как сделать так, чтобы кнопка отображалась вв верхнем правом углу диалога, а не под заголовком?Я попытался поместить теги <h></h> в div вместе с кнопкой, чтобы отделить их от остальной части диалога, но это также дало ряд консольных ошибок ...
Редактировать
Я также только что попытался отобразить заголовок диалогового окна и кнопку закрытия в таблице, чтобы проверить, правильно ли будет настроен макет:
<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
<table id="dialogTitle">
<tr>
<td>
<h3>Provisional Contacts & Managers</h3>
</td>
<td>
<button class="icon icon-close-selected" (click)="toggleProvContactSelector(false)"></button>
</td>
</tr>
</table>
...
</div>
, но сделать это простозаставляет кнопку «Выход» снова отображаться под заголовком диалога ... У кого-нибудь есть идеи?
Редактировать
Итак, я сделал то, что @Jonathan Hamal рекомендовал в своемкомментарий и изменил тег заголовка на:
<h3 style="display: inline-block">Provisional Contacts & Managers</h3><button type="button" (click)="toggleProvContactSelector(grouopPayer)"><img src="c:\Users\...\icon-close.png"></button>
, и теперь я вижу, что изображение отображается в правильном месте в диалоге (рядом с заголовком диалога).Однако изображение, похоже, отображается неправильно - вместо отображаемого изображения оно просто отображает значок файла «.png».
Кроме того, когда я нажимаю значок «Редактировать» вконтактная ячейка, чтобы открыть диалоговое окно, консоль показывает ошибку:
ОШИБКА TypeError: Невозможно прочитать свойство 'showProvContactSelector' из undefined в Object.eval [как updateRenderer] (ProvisionalRemindersComponent.html: 349)
Переменная showProvContactSelector - это то, что дается ngIf в объявлении <div>, в котором находится этот тег <h></h>.
У всех есть предложения покак решить эту проблему?
Редактировать
Итак, похоже, что изображение, которое я добавил, не отображалось должным образом, было в том, что оно находилось вне каталога проекта (хотя я указал полный путь к файлу).Я изменил его, чтобы использовать файл изображения из каталога проекта:
<h3 style="display: inline-block">Provisional Contacts & Managers <i class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayers.selectedPayer)"></i></h3>
и теперь могу видеть изображение, отображаемое правильно.Мне также нужно было добавить атрибут style="display: inline-block" к тегу изображения, чтобы он отображался в той же строке, что и текст заголовка.