0
thisのようなアプローチを使用して編集可能なセルを含む表を実装しようとしています。セルにはラベルまたはスパンと入力ボックスがあり、フラグを使用してng-showで表示するものを決定しています。しかし、ラベルが見えるようになると、セルは垂直方向に拡大します。このデモでは微妙ですが、2列目がわずかに下がっているのが見えます。編集時にサイズ変更されない編集可能なHTML表セル
どうすれば同じサイズにすることができますか？thisの編集可能な表の行のようにしますか？私はその例のスタイルを見てきましたが、それがどのように行われているのか分かりません。非編集モードのスパンは 'auto'のような次元を持つように見えますが、入力フォームが現れたときには明示的な幅/高さを持ち、まったく同じになります。
PS。私はそれをやっているやり方が最適ではないというアイデアに門戸を開いています。その場合、代替提案はすばらしいでしょう。
div[ng-controller] table tr td {
height: 45px;
/*text-align: center;*/
vertical-align: middle;
}
私は」なかったの：CSSに設定された明示的なサイズがありますので、それはだ - 細胞が、私は私の質問ににリンクされていることxeditable例では展開されませんなぜ私が見つけた
<div ng-controller="MyCtrl">
<table>
<tr>
<td>
<label ng-click="editing=true" ng-show="!editing">{{ mytext }}</label>
<input ng-blur="editing=false" ng-show="editing" ng-model="mytext" />
</td>
</tr>
<tr>
<td>
<label>some more text</label>
</td>
</tr>
</table>
</div>
「入力」の枠のために起こっています。 [ここに例があります]（http://jsfiddle.net/zwpesm4m/4/）、少しのCSSでそれを補うラベルです。また、提供したもう1つの例では、要素は常にスパンのままで、入力に切り替わらないため、バウンドしません。 –
ありがとう@Drew。しかし、私はまだ他の例（x-editable）がどのように動作するのか理解していません。編集ボタンをクリックしたときのように、実際には入力要素をその点のDOMに追加しています。私のアプリでは、表示テキストのスパンと、その例のようなブートストラップ "フォームコントロール"の入力を試みました（ng-showを使用するだけで、それを追加しています）。しかし、私はそれを表示すると、入力はセルの大きさを大きくします。 x-editableに何か起きることを止めるスタイリングトリックがあるなら、それは何かを見ることができません。たぶんそれは彼らがDOMにそれを追加しているという事実と関係があります... –