3

我的选项和答案功能有问题。如果我选择一个包含许多按钮输出的选项，例如如果我选择选项 20，它将显示 20 个按钮，我遇到的问题是在表格列的底部，空间下降了一点。它仅在更改选项时才会这样做，然后空间始终保持不变。My question is simply how can I stop the space at the bottom of the table column to increase when an option changes?

我发现导致此问题的代码是这样的：

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

获取匹配元素集中第一个元素的当前计算高度，包括填充但不包括边框。

  -- innerHeight()API 文档

因为这两个都等于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 回答