javascript - jeditableでテキストエリアのサイズを制御する

Question

私の目的: jquery プラグイン jeditable を使用して、説明のインライン版を許可します。

私の問題: textarea の入力が元の div よりも大きく、スクロール バーが表示されます。

試みられた解決策:

$('.editableDescription').editable('http://jsfiddle.net/echo/jsonp/', {

id: 'data[Chantier][id]',
name: 'data[Chantier][Description]',
type: 'textarea',
height: $(".editableDescription").height() + "px",
width:  $(".editableDescription").width()+ "px",
onblur: 'submit',
tooltip: ''

});​

jqueryでラッパーdivのサイズを取得しようとしましたが、それでも失敗します!

jsFiddle: jsFiddle

Answer 1

height:250px;まず、から削除する必要があります。.longtextそうしないと、Jeditable がそれを のデフォルトの高さとします<textarea>。

次に、 のように、その中にネストされる と.longtext同じスタイルを持っていることを確認しました。<textarea>line-height, font-size, font-family

また、ドキュメントにはおそらく複数あると想定しているため、 different to different.longtextを適用する必要があります。だから私はこれを変更しました：heights<textarea>s

$('.editableDescription').editable('http://jsfiddle.net/echo/jsonp/',
{
        id        : 'data[Chantier][id]',
        name      : 'data[Chantier][Description]',
        type      : 'textarea',
        height:($(".editableDescription").height()) + "px",
        width: ($(".editableDescription").width()) + "px",
        onblur: 'submit',
        tooltip   : ''
});

これに：

$('.editableDescription').each(function()
{
    $(this).editable('http://jsfiddle.net/echo/jsonp/',
    {
        id:'data[Chantier][id]',
        name:'data[Chantier][Description]',
        type:'textarea',

        height:$(this).height()+'px',
        /* here it will take the height of the currently active .longtext */

        width:$(this).width()+'px',
        onblur:'submit',
        tooltip: ''
   });
});

デモ

そして、それは基本的にそれです。

Answer 2

CSS オーバーフロー プロパティを非表示に設定してみてください。