How does resizing work for edit-in-place JQuery UI textarea editable?

Question

I have problems getting a JQuery Edit-In-Place textarea to be a fixed size.

Basically I have one HTML file, part of which has a paragraph named editable-large:

<div class="profile">
   <h2>About Me</h2>
   <p class="editable-large">
         Ansel Easton Adams (February 20, 1902 – April 22, 1984) was an American photographer and environmentalist, best known for his black-and-white photographs of the American West, especially in Yosemite National Park.
   </p>
</div>

And I have a JQuery JS file associated with that paragraph that allows it to be edited in place. So whenever someone clicks on the paragraph, it turns into a textarea.

$(".editable-large").editable(
    {  submit: "Save",
       cancel: "Cancel",
       type: "textarea",
       options: {"cols": 80, "rows": 10},
    }).css({"cols": 80,"rows": 10});

I want the textarea to have a certain width and height (80 & 10), but no matter what values I put in, it's always the same size and looks like this. I'd greatly appreciate any help in making that textarea a fixed size.

Answer 1

You can do that be giving your textarea a width and height ex:

textarea{
    width:100px;
    height:50px;
}