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沒有填充表格單元

回答

相關問題