0

I have following using Jquery and somehow I can resize it the right bottom corner where i see a resize icon . On side edges it shows <--> for resize but I cant stretch it from edge to resize ?What can be wrong ?

<div class="dragDiv" id="dragDiv">

    <div id="header" class="ui-widget-header handler"><img src="Styles/move_icon.jpg" align="top">
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>

<div style="width: 100%;height: 100%;">
    <textarea  style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
    <input type="submit" value="Mark" onclick="MarkImage()" style="height: 20px;" />
</div>


   <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   <script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
   <script src="Scripts/jquery.ui.resizable.js" type="text/javascript"></script>
   <script src="Scripts/jquery.ui.draggable.js" type="text/javascript"></script>


$("#dragDiv").resizable();
Pit Digger
  • 9,618
  • 23
  • 78
  • 122

1 Answers1

1

Get rid of 

<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>

And do this instead. 

$("#dragDiv").resizable({
 handles: 'e,w,s,n,se'
});
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • Cool ! Worked .... Is there any way to limit minimum height and width on re sizable div so people cant make it smaller or larger than some particular specified size ? – Pit Digger Apr 07 '11 at 13:40
  • You can add the `maxHeight` and `maxWidth` options so the code looks like `$("#dragDiv").resizable({ handles: 'e,w,s,n,se', maxHeight:200, maxWidth:200 });` – Hussein Apr 07 '11 at 17:57