Home > DeveloperSection > Forums > Position:relative wrapping and element height?
Simons Hood
Simons Hood

Total Post:70

Points:494
Posted on    April-04-2013 2:07 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 2 Reply(s)
 954  View(s)
Rate this:
Hi Everyone!

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)

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*/

                }));
});

Advance Thanks!


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    April-04-2013 7:16 AM

Hi Samuel!

try this way

CSS:

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

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

it may be it resolve your problem 

Vijay Shukla

Total Post:100

Points:700
Posted on    April-04-2013 7:25 AM

Hi Samuel!

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

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


Don't want to miss updates? Please click the below button!

Follow MindStick