How to prevent increase of table cell while nesting input tag?

Question

I nest input tag by condition:

<td *ngFor="let cell of row.Persons">

    <span cell.editable === true ">
        <input type="number" [(ngModel)]="cell.PersonCount" autofocus />
    </span>

    <span *ngIf="cell.editable === false " (click)="toggle(cell)">
        {{ cell.PersonCount ? cell.PersonCount : '-' }}
    </span>

</td>

The width of table cell Person without input tag looks like that:

And when Person cell has input tag:

I've tried to set the following style, however there is no result:

<input type="number" [(ngModel)]="cell.PersonCount"
       style="display: inline; max-width: 100%; width: inherit; height: 
       inherit;  box-sizing: border-box !important; overflow:hidden;
       -moz-box-sizing: border-box !important;
       -webkit-box-sizing: border-box !important; border: none;" autofocus />

My question is how can I keep size of cell to be the same like there is no input tag (like on the first image)?

I've created an example at plunker, please, see it.

Answer 1

The problem are the dimensions of the input itself. <input> elements have an attribute called size which defaults to 20, which means this would behave all the same:

• <input type="text" />

• <input type="text" size="20" />

• <input type="text" size="0" />

Anyhow, the problem still remains if you set size to the smallest value (1) because that's still a "hardcoded" size and not relative to any other element.

The only way around would be to set a width (either static or dynamic) to the parent element (your td) in both cases, and set your input to width: 100%.

I adjusted your plunkr a bit as an example of how you could do it.

Hope it helps.

P.S: The min-width problem i mentioned is a bootstrap thing i think, anyway it only matters if you actually set a width, in this case set min-width to 0 to override the bootstrap defaults.

Answer 2

Try this :

<td *ngFor="let cell of row.Persons" style="display: inherit;">
    <span *ngIf="cell.editable">
        <input type="number" [(ngModel)]="cell.PersonCount" autofocus style="max-width: 50px;"/>
    </span>
</td>