如何防止嵌套輸入標籤時增加表格單元格？

我窩input標籤的條件：如何防止嵌套輸入標籤時增加表格單元格？

<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>

表格單元格Person沒有input標籤寬度看起來像這樣：

當Person細胞具有input標籤：

我試圖設置以下風格，但沒有結果：

<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 />

我的問題是我怎麼能保持細胞的大小是一樣的，就像沒有input標籤（如第一圖像）？

我創建了an example at plunker，請看看它。

來源

2017-09-15 StepUp

檢查最小寬度。 – lexith

@lexith我應該設置什麼值爲'min-width'？ – StepUp

我可能將寬度設置爲100％，最小寬度設置爲0 – lexith

問題是輸入本身的尺寸。 <input>元件具有稱爲size默認爲20的屬性，這意味着這將表現所有相同：

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

總之，問題依然存在如果將size設置爲最小值（1），因爲它仍然是「硬編碼」大小，而不是相對於任何其他元素。

在這兩種情況下，唯一的方法是在父元素（您的td）上設置寬度（靜態或動態），並將輸入設置爲width: 100%。

我調整了你的plunkr作爲你如何做到這一點的例子。

希望它有幫助。

P.S：我提到的min-width問題是一個bootstrap的東西，我認爲，無論如何它只是如果你真的設置寬度，在這種情況下設置最小寬度爲0覆蓋引導默認值。

來源

2017-09-15 11:23:25 lexith

試試這個：您輸入的

<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>

來源

2017-09-15 11:44:17 Chandru

如何防止嵌套輸入標籤時增加表格單元格？

回答

相關問題