jQuery UI resizable minimal example

Question

Why doesn't this work?

Minimal example taken from https://jqueryui.com/resizable/

// Links to jsfiddle must be accompanied by code

https://jsfiddle.net/e0sdfuLb/

Answer 1

Your fiddle is not working because you haven't imported also the jQuery-UI CSS:

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

So here is the jsfiddle updated (and working): https://jsfiddle.net/beaver71/kbu61s3a/5/

$(document).ready( function() {
    $( "#resizable" ).resizable();
});

#resizable {
     width: 200px;
     height: 200px;
     padding: 0.5em;
     background: #ccc;
  }
  #resizable h3 { text-align: center; margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="resizable" class="ui-widget-content" >
  <h3 class="ui-widget-header">Resizable</h3>
</div>