0

I have the following table with dynamically generated rows of input boxes which may contain default value. When no default is available from the database an empty string is returned ''. The problem is this causes the table to be collapsed on those inputs.

 <tr *ngFor="let d of displayData">
    <td class=".mytable"> {{d.specRow}} </td>
    <td *ngFor="let l of d.limitModel ">
      <input type="text" [ngModel]="l?.target" (ngModelChange)="changeSelectedItem($event, l)" [name]="l.target" />
    </td>

If I click in the input box next to Comment 4 then more rows are added until the next input with an empty string is reached. The input is tied to a model - how can I force these rows to render with an empty string?

enter image description here

EDIT: When not bound with ngModel the rows load as expected. The issue is binding to an empty string.

Matt
  • 500
  • 7
  • 18
  • try using ` ` (non breaking space) instead of an empty string. – Michel Oct 24 '22 at 15:58
  • Michel - maybe I'm dense here but when I try to use the non breaking space it's treated like a string by the interface and thus displays " " in the text box. – Matt Oct 24 '22 at 16:37
  • Ah, didn't take the interfaces into account. The [answer found here](https://stackoverflow.com/a/42225797/1685196) is in the css: `td:empty::after{ content: "\00a0"; }` – Michel Oct 25 '22 at 08:05
  • Does this answer your question? [Prevent collapse of empty rows in HTML table via CSS](https://stackoverflow.com/questions/42225196/prevent-collapse-of-empty-rows-in-html-table-via-css) – Michel Oct 25 '22 at 08:06
  • I've tried all these methods out and they do modify the table but I still face the same problem where rows do not render properly on the screen, once i click around and they render then the CSS takes affect. – Matt Oct 25 '22 at 13:14

2 Answers2

0

The simplest solution for your particular case would be to add a hide class to those rows that have empty data.

 <tr *ngFor="let d of displayData" [class.hidden]="d.specRow == ''">

Ensure you have a corresponding 'hidden' class in your CSS.

Grant
  • 5,709
  • 2
  • 38
  • 50
  • I need to display the empty boxes as the user may want to add a value where one does not exist. – Matt Oct 24 '22 at 16:33
0

So here is what I did as a workaround. The rows would only render properly if each cell had value.

So I load the display with a ' ' in place of null for each empty input box. Afterwards I loop through all the inputs and trim after rendering is complete.

     this.displayData?.forEach((x) => {
      x.limitModel.forEach((y) => {
        y.target = y.target.trimStart();
      });
    });
Matt
  • 500
  • 7
  • 18