Position:relative wrapping and element height?

Question

I have a simple TextArea and a button

When the button is clicked , I need to wrap (exactly) the text area with a red div ( border:solid 1px red )

ps this wrapper div must be position:relative because I need to add future absolute positioned elements

And so I wrote this code :

$(".btn").on('click',function (){

 $(".myTextArea").wrap($('<span/>', {
                    "class": 'msgAbsWrap',
                    "style": "position:relative;display:inline" /*it's inline by default ,I know*/

                }));
});

but the problem is that it doesn't wrap it as it should :

• why is it happenning ?
• How can I make the red div wrap (exactly) the textarea ?

JSBIN

ps Im using chrome v 26.

edit

( my bad ) I forgot to remove the width from the textArea (after 1000 testings). it should be width:100% . can you please try now ?

JSBIN NEW

Answer 1

Change the display style of the span to display: inline-block;

$(".myTextArea").wrap($('<span/>', {
    "class": 'msgAbsWrap',
    "style": "position:relative; display:inline-block; width: 100%;"
}));

Demo: JSBIN

Answer 2

You can do these changes to take effects:

CSS:

.msgAbsWrap {
   border:solid 1px red;
   display:inline-block;
   width:100%;
   position:relative;
}

jQuery:

$(".btn").on('click', function () {
  $(".myTextArea").wrap($('<span/>', {
        "class": 'msgAbsWrap'
  }));
});

Checkout the updated fiddle

Answer 3

Change it to this:

$(".btn").on('click',function (){
    $(".myTextArea").attr('class', 'msgAbsWrap');
});

jsbin: http://jsbin.com/izopaz/12/

Answer 4

Do it like this:

$(".btn").on('click',function (){

 $(".myTextArea").wrap($('<div></div>', {
    "class": 'msgAbsWrap',
    "style": "position:relative;"
 }));

});

Check this example: jsbin