0

I'm working on a PHP/ Laravel application, and there is a form on one of the pages displaying a table showing information about various transactions made through the website.

One of the columns in the table is titled 'Contact', and displays the contact details for the person responsible for that transaction. Each cell in this column also displays an 'Edit' button, which will open a dialog that allows the user to add/ remove/ change the contact whose details will be displayed for this transaction.

Currently, when the user clicks the 'Edit' button and the dialog is displayed, that 'Edit' button icon changes to an 'X' to allow them to close the dialog, but the dialog itself is displayed slightly below this location on the page, so it seems a number of users are missing that this is how they would close the dialog.

I want to add an 'X' button to the dialog itself, to allow the users to close it by clicking that too.

The HTML displaying this table cell & dialog is:

<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 &amp; 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>

I tried adding the button in just after the <h></h> tags, but when I view the page, and open the dialog in the browser, the button is displayed below the dialog title. If I try putting the button inside the <h></h> tags, I get errors in the console, and the page doesn't load correctly...

The console errors are:

vendor.bundle.js?ver=1486951446:54441 ERROR Error: Uncaught (in promise): Error: Loading chunk common failed.

Error: Loading chunk common failed. at HTMLScriptElement.onScriptComplete (inline.bundle.js?ver=1432283697:104) at HTMLScriptElement.wrapFn (polyfills.bundle.js?ver=450735834:6545) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js?ver=450735834:5800) at Object.onInvokeTask (vendor.bundle.js?ver=1486951446:57733) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js?ver=450735834:5799) at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js?ver=450735834:5567) at ZoneTask.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke]

How can I make the button be displayed in the top right corner of the dialog, rather than below the title? I tried putting the <h></h> tags in a div, along with the button, to keep them separate from the rest of the dialog, but this also gave a number of console errors...

Edit

I've also just tried displayed the dialog title & the close button in a table, to see if that will get the layout right:

<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
    <table id="dialogTitle">
        <tr>
            <td>
                <h3>Provisional Contacts &amp; Managers</h3>
            </td>
            <td>
                <button class="icon icon-close-selected" (click)="toggleProvContactSelector(false)"></button>
            </td>
        </tr>
    </table>
    ...
</div>

but doing this just causes the Exit button to be displayed below the dialog title again... Anyone have any ideas?

Edit

So, I did what @Jonathan Hamal recommended in his comment, and changed the heading tag to:

<h3 style="display: inline-block">Provisional Contacts &amp; Managers</h3><button type="button" (click)="toggleProvContactSelector(grouopPayer)"><img src="c:\Users\...\icon-close.png"></button>

and I can now see that the image is being displayed in the correct location in the dialog (next to the dialog heading). However, the image does not seem to be rendered correctly- instead of the actual image being displayed, it's just displaying a '.png' file icon.

Also, when I click on the 'Edit' icon in the contact cell, to open the dialog, the console is showing an error:

ERROR TypeError: Cannot read property 'showProvContactSelector' of undefined at Object.eval [as updateRenderer] (ProvisionalRemindersComponent.html:349)

The showProvContactSelector variable is what's being given to the ngIf in the <div> declaration in which this <h></h> tag is located.

Anyone have any suggestions on how to resolve this?

Edit

So, it seems that the reason the image I had added wasn't displaying properly was because it was located outside the project directory (even though I had specified the full file path). I changed it to use an image file from within the project directory:

<h3 style="display: inline-block">Provisional Contacts &amp; Managers <i class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayers.selectedPayer)"></i></h3>

and can now see the image displayed properly. I also needed to add the style="display: inline-block" attribute to the image tag in order to get it to display on the same line as the heading text.

Noble-Surfer
  • 3,052
  • 11
  • 73
  • 118
  • Table does not have a child node named , but rather , see this for reference: https://www.w3schools.com/tags/tag_table.asp – Jonathan Hamel Sep 20 '18 at 13:02
  • Well spotted- brain fart while typing it out. Corrected, but the issue remains... – Noble-Surfer Sep 20 '18 at 13:16
  • Unless you have styles on your table elements, they should be side by side. As for the

    , it is a block element and will not allow the button to sit next to it. Use `h3 { display: inline-block }` for your first version

     – Jonathan Hamel Sep 20 '18 at 13:25
  • I haven't explicitly added any styles to the table element myself- though I don't know if any have been set globally elsewhere, as I've just started working on this project. I tried changing the code for my first version to `

    Provisional Contacts & Managers

    `, but that doesn't seem to have made a difference...     – Noble-Surfer Sep 20 '18 at 14:00
  • The `display` property is a style, if applied inline, it must be applied using `

    A

    `. You can go around https://www.w3schools.com/html/html_styles.asp to get an introduction on html and css. Also, make sure your button in **not** in the

    tag, but right after since

    – Jonathan Hamel Sep 20 '18 at 14:36
  • Thanks for your answer, I tried `

    Provisional Contacts & Managers

    `, and when I now open the dialog, I can see that there is an image where I placed it, but that image isn't displayed properly- it displays an image file icon, rather than the image itself. I also get an error in the console when the dialog opens, saying `Cannot read property 'showProvTaxContactSelector' of undefined`...     – Noble-Surfer Sep 21 '18 at 14:19
  • Any suggestions? – Noble-Surfer Sep 21 '18 at 14:19
  • Fix your image src https://stackoverflow.com/questions/4090712/why-cant-i-do-img-src-c-localfile-jpg. If only on disk, you may want to serve it through a web server. As for the error, is your `payer` object assigned to the global `$scope` object in your angular controller? Please review documentation and trace errors in the debugger console. – Jonathan Hamel Sep 21 '18 at 15:21
  • The image is local, but I'm also only viewing the site locally at the moment- I will push the image to the server once I've got it working and push these changes up. Yes, I think the `payer` object must be assigned to the global $scope` object in the controller, as it's used elsewhere in the same file. – Noble-Surfer Sep 21 '18 at 16:03
  • @JonathanHamel If you want to post your comment as an answer, I will mark it accepted- it led me to the right solution. – Noble-Surfer Sep 24 '18 at 13:11

1 Answers1

1

As mentioned in the comments, I will post my comment as an answer for visibility.

There are a few things that need to be fixed from what I see in your code.

  1. Headings are block elements. Therefore, no button can be floated beside it. Make sure to give a h3 {display: inline-block} to your heading. Or use tables, floats or flexbox layouts.
  2. Your image URL is currently refered from your disk instead of served through a web server. Make sure to host the file and serve it statically, before deploying on any host.
  3. As for your error on the payer object, make sure it is correctly assigned to the $scope object and referenced correctly. Otherwise, use the dev tools, it's your best friend.

Go around w3schools for basic html/css/js docs and AngularJs docs. You can always open your debugger console and trace down the errors. I find it very helpful to play with styles directly on the browser developer tools as well.

Cheers

Jonathan Hamel
  • 1,393
  • 13
  • 18