Aurelia Dialog and Javascript Dynamic Display of Div

Help Requests
1

I am using Aurelia Dialog Service plugin to display invoices in my app, and I’m running into an issue only in the media display for Cellphones, and I’m confused as to why it’s not working as expected.

I’ve got a div that I am dynamically creating with a ‘shrink’ and ‘expand’ that works in the FullSize view, but not in the CellPhone view.

It just doesn’t refresh.

The text prints to the console, and I can see it, it just won’t update the aurelia dialog service popup that I’ve got.

Here’s the text that I’m generating:

<a name="a65784445"></a><div id="invoiceShort_a65784445" ><i>Applies to: ARH DM304, ARH DM305, ... (120 invoices)</i><br>
<span class="span spanLink" onclick="console.log('form', document.getElementById('invoiceLong_a65784445')); document.getElementById('invoiceShort_a65784445').style.display='none'; document.getElementById('invoiceLong_a65784445').style.display='contents';">+ Expand invoice list</span></div><div id="invoiceLong_a65784445" style="display:none;"><span class="span spanLink" onclick="document.getElementById('invoiceShort_a65784445').style.display='contents'; document.getElementById('invoiceLong_a65784445').style.display='none';">- Shrink invoice list</span><br>
<i>Applies to: ARH DM304, ARH DM305, ARH DM306-1, ORD210003221 000, ORD210003265 000, ORD210003295 000, ORD210003311 000, ORD210003334 000, ORD210003367 000, ORD210003401 000, ORD210003410 000, ORD210003432 000, ORD210003443 000, ORD210003470 000, ORD210003487 000, ORD210003504 000, ORD210003508 000, ORD210003516 000, ORD210003523 000, ORD210003530 000, ORD210003536 000, ORD210003540 000, ORD210003577 000, ORD210003586 000, ORD210003595 000, ORD210003605 000, ORD210003607 000, ORD210003608 000, ORD210003628 000, ORD210003632 000, ORD210003636 000, ORD210003645 000, ORD210003646 000, ORD210003694 000, ORD210003696 000, ORD210003703 000, ORD210003710 000, ORD210003711 000, ORD210003720 000, ORD210003721 000, ORD210003731 000, ORD210003736 000, ORD210003740 000, ORD210003741 000, ORD210003742 000, ORD210003759 000, ORD210003762 000, ORD210003769 000, ORD210003770 000, ORD210003777 000, ORD210003789 000, ORD210003800 000, ORD210003844 000, ORD210003845 000, ORD210003846 000, ORD210003870 000, ORD210003881 000, ORD210003887 000, ORD210003890 000, ORD210003911 000, ORD210003964 000, ORD210003965 000, ORD210003988 000, ORD210004006 000, ORD210004016 000, ORD210004034 000, ORD210004044 000, ORD210004052 000, ORD210004058 000, ORD210004066 000, ORD210004080 000, ORD210004120 000, ORD210004122 000, ORD210004133 000, ORD210004142 000, ORD210004157 000, ORD210004163 000, ORD210004165 000, ORD210004171 000, ORD210004182 000, ORD210004183 000, ORD210004185 000, ORD210004191 000, ORD210004205 000, ORD210004225 000, ORD210004232 000, ORD210004246 000, ORD210004248 000, ORD210004255 000, ORD210004260 000, ORD210004261 000, ORD210004270 000, ORD210004277 000, ORD210004289 000, ORD210004295 000, ORD210004303 000, ORD210004309 000, ORD210004311 000, ORD210004319 000, ORD210004322 000, ORD210004336 000, ORD210004340 000, ORD210004361 000, ORD210004366 000, ORD210004422 000, ORD210004427 000, ORD210004428 000, ORD210004441 000, ORD210004448 000, ORD210004459 000, ORD210004460 000, ORD210004464 000, ORD210004476 000, ORD210004494 000, ORD210004506 000, ORD210004512 000, ORD210004529 000, ORD210004534 000, ORD210004546 000, ORD210004552 000</i><br>
<span class="span spanLink" onclick="document.getElementById('invoiceShort_a65784445').style.display='contents'; document.getElementById('invoiceLong_a65784445').style.display='none';">- Shrink invoice list</span></div>

It’s enclosed in at ‘notesTd’ and ‘notesTableSmall’ class, which are defined in the media section of style.css as follows:

.notesTableSmall, .smallTable, .smallTableTd,
  .custExtraTdLabel, .custExtraTdInput, .invoiceTable
  { 
		display: block; 
	}

  .notesTd
  {
    display: contents;
    width: 100%;
  }

I’m calling the InvoiceDetails DialogService the same way no matter whether it’s fullsize or cellphone sized from customer.js as follows:

open_invoice(customerObj, debt_id_no)
  {

    var params = [
      {'customerObj': customerObj},
      {'debt_id_no': debt_id_no}
    ];

    //console.log('debt_id_no', customerObj);

    this.dialogService.open({viewModel: InvoiceDetails, 
                              model: params, 
                              lock: false})
      .then(async response => {
        if (await response.closeResult)
        {
          var isSearch = document.location.href;

          if (isSearch.match('customer'))
          {
            //console.log('customer open');
            this.activate({debtor_id: this.dbtr.debtor_id,
                           show_closed_inv_num: this.inv_num});
            this.show_closed_inv_num = this.inv_num;
            this.state.searchObj.show_closed_inv_num = this.show_closed_inv_num;
            //console.log('state closed inv num', this.state.searchObj.show_closedInv_num);
          }
        }
      });
  }

Any thoughts on this would be greatly appreciated.