JQuery User Interface 1.10.2. How to get dimension visualization inside a dialog box?

Question

Resize handles do not appear in the dialog box or in everything that I try to change in the dialog box. I know this from design that they are disabled in themes, but how do I get them? I need to see them in the dialog content, and those for the dialogue will 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 several things that contribute to the problem, one of which may be a mistake.

Firstly, you are correct that the southeastern pen is intentionally hidden, however all 8 pens still exist as elements in the dialog box. This is good news, as you can add the following CSS to return the se descriptor. This is a bit of a hack to get around deliberate hiding, and you can customize the location of the right and bottom to suit your needs.

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

Other grabbers by design do not seem to have the style associated with them. None of the topics I checked have a visible style (other than cursor ). Find .ui-resizable- in jquery-ui.css to see this.

This is similar to the documentation, but is only mentioned in the context of creating your own pens. There is nothing concrete about the existing topic support. Fortunately, all descriptors share the class, so we can make them visible by adding:

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

Or just one side, for example:

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

A possible error that I mentioned was about controlling the creation of controls. The code in question is $('#bar').resizable({handles:'sw,se,e'}); , should be correct and contain only 3 controls, 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 specify as the parameter parameter, but typeof handles = 'object' for me, so jQueryUI uses a different part of the ternary code.

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; } 

in

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

Answer 3

Or you just forgot to include the required css

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

Mark this

UPD They receive pens, they simply are not visible by default. This is not something specific to the jQuery user interface. Many changeable windows work this way.