3

私が持っているオプションと回答機能に問題があります。いくつかのボタンの出力を含むオプションを選択すると、たとえばオプション20を選択すると、20個のボタンが表示されます。問題は、テーブル列の下部でスペースが少し下がることです。オプションが変更され、スペースが全体に残る場合にのみ実行されます。私の質問は、オプションが変更されたときにテーブル列の下部のスペースを増やして増やすにはどうすればよいですか？

この問題を引き起こしているコードは次のとおりです。

  //THE ISSUE IS HERE

var _x = $(e.currentTarget);
var _y = _x.closest('td.extratd');
var _z = _y.prev();

$('textarea', _z).css('height', '').height(_z.innerHeight());

//ISSUE ABOVE

上記のコードはQuestion、textareaが追加されたとき、またはオプションが変更されたときに、列内のtextareaがテーブルセル全体を埋めることを許可します。したがって、上記のコードが必要ですが、上記のコードでも、テーブル行の下部に不要なスペースが作成されるため、不要なスペースを整理するための支援が必要です。

ここにjsfiddleがあり、これを使用して何が起こっているかを確認できます。また、上記のコードも含まれています：http: //jsfiddle.net/aND4g/61/

フィドルを使用するには、以下の手順に従ってください。

  1. フィドルを開くときは、一番上に質問のテキストエリアにコンテンツを入力し、Open Gridボタン3またはを選択します4。

  2. 手順1が完了したら、Add Questionボタンをクリックして上記の詳細を下の表に追加します

  3. 追加された行内で、をクリックし、Open Grid最初に選択したものから他のオプションを選択します。テーブル行の下部に不要なスペースが作成されることがわかります

4

1 に答える 1

2

innerHeight()これは、とを含むpadding-topを使用しているためですpadding-bottom。

一致した要素のセットの最初の要素について現在計算されている高さを取得します。これには、パディングは含まれますが、境界線は含まれません。

  --APIinnerHeight()ドキュメント

これらは両方ともに等しいので1em、あなたは2emあなたが望むより多くの高さを得ています。だから、私は迅速でハッキーな修正を実装しました：

// Get the padding of the cell
var ignoreHeight = parseInt(_z.css("padding-top")) + parseInt(_z.css("padding-bottom"));
// Set the height without that padding
$('textarea', _z).css('height', '').height(_z.innerHeight() - ignoreHeight);

jsFiddle

基本的には、変数にパディングを追加し、設定している実際の高さからそれを差し引いただけです。より良い方法でこのパディングを「無視」できるより良い方法があるかもしれませんが、これはあなたの場合にはうまくいくようです。

于 2013-01-25T01:45:30.273 に答える