CODEWITHSUNDEEP
jqueryhtmlcss
Royi Namir
Royi Namir

Reputation: 148744

Position:relative wrapping and element height?

I have a simple TextArea and a button

enter image description here

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

p.s 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 :

enter image description here

JSBIN

p.s. 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

Upvotes: 0

Views: 72

Answers (4)

Jai
Jai

Reputation: 74748

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

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

Upvotes: 1

Shlomo
Shlomo

Reputation: 3990

Do it like this:

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

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

});

Check this example: jsbin

Upvotes: 0

Alex Ovechkin
Alex Ovechkin

Reputation: 820

Change it to this:

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

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

Upvotes: 0

Related Questions