html 单元格编辑状态,可编辑的HTML表格单元格编辑

当我试图实现与使用方法类似this可编辑的单元格的表，不调整。该单元格包含一个标签或跨度以及一个输入框，我使用一个标志来决定通过ng-show显示哪一个。但是当标签变得可见时，单元格会垂直展开。这个演示很微妙，但你可以看到第二行略微下移。可编辑的HTML表格单元格编辑

我怎样才能使它保持相同的大小，就像this例如可编辑的表行？我已经看过这个例子中的样式，但我无法弄清楚它是如何完成的。非编辑模式跨度似乎有尺寸“自动”，但输入形式出现时，它具有明确的宽度/高度 - 他们碰巧是完全一样的。

PS。我接受这样的观点，即我做这件事的方式并不是最优的，在这种情况下，任何替代建议都会很棒。

{{ mytext }}

some more text

2017-02-25

John B

+0

，它的发生是因为在'input'边界。 [下面是一个例子]标签补偿它用少量的CSS(http://jsfiddle.net/zwpesm4m/4/)。另外，在您提供的另一个示例中，该元素始终保持一个跨度，并且不会切换到输入，因此不会反弹。 –

+0

谢谢@德鲁。但我仍然不明白其他示例(x-editable)是如何工作的。它看起来像当你点击编辑按钮时，他们实际上是将输入元素添加到该点的DOM。在我的应用我试图用一个跨度为显示文本和引导“的形式控制”输入就是这样的例子(除了我没有将它添加上的苍蝇，只是用NG-显示)。但是当我展示它时，输入使得单元格更大。如果x-editable有一些造型技巧可以阻止它发生，我看不到它是什么。也许它与他们将其添加到DOM的事实有关... –