textarea没有填充表格单元

我遇到了麻烦，我的控件一直在增加表格单元格。textarea没有填充表格单元

我这里有一个应用程序：http://jsfiddle.net/XM8hG/8/embedded/result/

看到代码，请访问此链接：http://jsfiddle.net/XM8hG/8/

请打开应用程序，并遵循以下基本步骤：

当您打开点击“添加问题”按钮，添加一个表格行。您将在附加的行中点击“打开网格”并选择按钮“3”，您会在textarea上方和下方看到一个微小的间隙，再次打开网格并选择按钮“26”，您将看到一个在textarea上方和下方产生更大的差距。

我不希望textarea上方或下方有任何间隙我希望textarea填充表格单元格。但我怎么能这样做，因为我已经把高度设置为100％。

下面是文本区域的CSS：

.textAreaQuestion{ 
    width:auto; 
    resize:none; 
    height:100%; 
    font-size:100%; 
    display: block; 
    overflow:auto; 

}

下面就是我试图填补表格单元格中的jQuery代码，在它被点击“添加问题”按钮时的时刻上。

function setWidth() { 
    var questionCellWidth = $("#qandatbl_onthefly tbody .question").width(); 
    var questionCellHeight = $("#qandatbl_onthefly tbody .question").height(); 
    $(".textAreaQuestion").css({ 
     "width": (questionCellWidth - 6) + "px", 
     "height": (questionCellHeight) + "px" 
    }); 
}

来源

2013-01-01 user1881090

你重写'height：100％'。用开发人员工具检查元素。 – Vucko

我前段时间提出了一个关于这个模块的建议，你忘记了所有的脚本，并首先让你的CSS使用硬编码html。然后逆向工程任何动态html插入.....会节省你追逐像这样愚蠢的错误。通常这种情况.....似乎做正确的方式需要很长时间，但实际上它可以节省时间，长期来看 – charlietfl

应该可以做到这一点...与大多数现代用户界面相比，模块仍然看起来很糟糕，显示在浏览器中不一致 – charlietfl

我成立了一个new example展示如何风格的textarea内几个div元素。这个例子包括CSS，它自动缩放textarea的宽度/高度以匹配右侧的内容。我试图按照原始帖子的逻辑和结构，但是从头开始使用div元素。希望这段代码很有用。它旨在允许单个问题和答案条目，并可以添加新的问题/答案集。

来源

2013-01-01 23:23:20 thirdender

textarea从中间开始，我知道你看起来像textarea来填充整个单元格，所以当我输入一段文本时应该能够在表格单元格的顶部 – user1881090

下面是一个带有基本html的fillde，包含了你的css，但是你可以看到textarea并没有像游标开始时那样一路走完：http://jsfiddle.net/BpWes/ – user1881090

我对原来的jsFiddle发表了一个评论，希望能够解决你之前提到的问题（事实证明，Chrome可以在表格单元格中使用100％高度'textarea'元素，但其他浏览器并不多）。这个新的jsFiddle被重构为使用'div'元素而不是表格。 – thirdender

textarea没有填充表格单元

回答

相关问题