My objective: Allowing inline-edition of a description with the jquery plugin jeditable.

My problem: The textarea input is bigger than the original div, leading to the apparition of scroll-bars.

Attempted solution:

$('.editableDescription').editable('/', {

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

});​

I tried to take the size of the wrapper div with jquery, but it still fails!

jsFiddle:jsFiddle

My objective: Allowing inline-edition of a description with the jquery plugin jeditable.

My problem: The textarea input is bigger than the original div, leading to the apparition of scroll-bars.

Attempted solution:

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

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

});​

I tried to take the size of the wrapper div with jquery, but it still fails!

jsFiddle:jsFiddle

• javascript
• jquery
• css
• html
• textarea

2 Answers 2

First, you need to remove height:250px; from .longtext, or else Jeditable will take it as the default height for the <textarea>.

Then I made sure that .longtext had the same styles as the <textarea> that will be nested inside it, such as line-height, font-size, font-family.

And I assumed that you'll probably have more than one .longtext in your document, so you will need to apply different heights to different <textarea>s. So I changed this:

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

​ to this:

$('.editableDescription').each(function()
{
    $(this).editable('http://jsfiddle/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: ''
   });
});

DEMO

And that's basically it.

You may try to set the CSS overflow property to hidden