在剑道网格内调整 textarea答案

【问题标题】：Sizing textarea inside kendo grid在剑道网格内调整 textarea
【发布时间】：2016-12-18 00:31:30
【问题描述】：

我需要一个剑道网格内的内联文本区域，以允许用户编辑字符串值。我想使用 textarea 因为值可能很长。我正在使用自定义编辑器来实现这里提到的这一点：http://www.telerik.com/forums/how-to-change-input-to-textarea-in-popup-editor

我将 textarea 的宽度和高度设置为与容器的相同

$('<textarea data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '" style="width: ' + container.width() + 'px;height:' + container.height() + 'px" />')

这似乎不起作用。当我在单击要编辑的单元格之前检查开发人员工具中 textarea 元素的高度时，它显示为 35px，之后显示为 47px。这会导致网格的其余部分向下移动。

http://dojo.telerik.com/@unicorn2/eCAkU

【问题讨论】：

标签： javascript html kendo-ui telerik kendo-grid

【解决方案1】：

发生这种情况是因为在这种情况下，您不能只使用container 的高度作为其自身内部元素的高度。例如，该行具有其他 spacing 属性，例如填充。在一个简单而快速的镜头中，我完成了这个：

$('<textarea data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '" style="width: ' + (container.width() - 10) + 'px;height:' + (container.height() - 12) + 'px" />').appendTo(container);

Demo.

只需减小一点容器的尺寸，它就非常适合行高。唯一的问题是断线，因为当调用editor 回调时，容器的内容被重置并且行的高度变得像单行一样。然后container.height() 返回单个行高。

【讨论】：