JQuery UI 1.10.2 - How to get resize handles visible inside dialog?

Question

The resize handles don't show on dialog or in anything I try to resizablify inside a dialog. I know this is by design that they are disabled in the themes, but how do I get them visible? I need to see them in the dialog content and the ones for the dialog would not hurt either.

<p><a href="#dialog">Dialog</a>
<div id="dialog" style="display:none;">
  <p>foobar</p>
    <div style="width:100px; height:100px; border:1px solid;" id="bar">BAR</div>
</div>
<script>
    $(function(){
      $('a[href=#dialog]').click( function(e) {   
        e.preventDefault(); 
          $('#dialog').dialog({
              open: function() {
                   $('#bar').resizable({handles:'sw,se,e'});   
              }
          });
      });
    });
</script>

Also in JSFiddle: http://jsfiddle.net/s22nx/

Answer 1

There are a couple of things going on here contributing to the problem, one of them could be a bug.

Firstly, you are correct that the south-east handle was hidden intentionally, however all 8 handles still exist as elements in the dialog. This is good news since you can add the following CSS to bring the se handle back. It's a bit of a hack to get around the intentional hiding and you might want to adjust the right and bottom positioning to suit your needs.

.ui-dialog .ui-resizable-se {
    right:0 !important;
    bottom:0 !important;
    background-position: -64px -224px !important;
}

The other grabbers seem to by design have no style associated with them. None of the themes I checked have any visible style (aside from the cursor). Search for .ui-resizable- in the jquery-ui.css to see this.

This is sort of covered in the documentation but only mentioned in the context of generating your own handles. There is nothing explicit about existing theme support. Luckily all the handles share a class, so we can make them all visible by adding:

.ui-resizable-handle {
    background-color:lightblue;
}

Or just one side, for example:

.ui-resizable-s {
    background-color:lightblue;
}

The possible bug I mentioned was to do with controlling the generation of handle elements. The code in question $('#bar').resizable({handles:'sw,se,e'}); should be correct and result in only 3 handle elements but all 8 always appear.

In the _makeResizable function in jquery-ui.js (v1.10.2) the line:

resizeHandles = typeof handles === "string" ? handles : "n,e,s,w,se,sw,ne,nw";

should set the correct resizeHandles to the value you supply as an options parameter but typeof handles = 'object' for me, so jQueryUI is using the else part of the ternary.

Answer 2

In the css file, I had to change:

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}

to:

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: 3px;
    bottom: 3px;
}

Answer 3

Or you just forget to include required css

<script src="js/jquery-ui.min.js"></script>

Check this

UPD They do get handles, they're just not visible with the default theme. This isn't something specific to jQuery UI. Many resizable windows work this way.