Getting Started

The external script dependencies of Resizable widget are,

And the internal script dependencies of the Resizable are:

File  Description / Usage
ej.core.min.js Must be referred always before using all the JS controls.
ej.draggable.min.js Main file for Resize

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.

For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Configure the sample

Create a new HTML file and add CDN links to the JavaScript and CSS dependencies to your project.

  • html
  • <!DOCTYPE html>
    
        <html>
    
        <head>
    
            <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
    
            <!-- style sheet for default theme(flat azure) -->
    
            <link href="http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css"
                  rel="stylesheet" />
    
            <!--scripts-->
    
            <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>
    
            <script src="http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js"></script>
    
        </head>
    
        <body>
    
            <!--Place div element to perform Resize-->
    
            <script>
    
                // Place your script code here to initialize Resizable
    
            </script>
    
        </body>
    
        </html>

    NOTE

    In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

    Initialize Resize

    HTML elements can be resized by using ejResizable widget. This section explains how to perform resize.

  • html
  • <div id="Container">
            <!-- Resizable element-->
            <div id="resizeElement" class="Resize">
                <span class="ResizeText">Resize</span>
            </div>
    
        </div>
        <style>
            #Container {
                width: 100px;
                height: 100px;
                padding: 30px;
                float: left;
            }
    
    
            .Resize {
                width: 120px;
                height: 100px;
                float: left;
                font-size: 14px;
                line-height: 37px;
                color: white;
                text-align: center;
                z-index: 100002;
                background-color: #666;
            }
    
    
            .ResizeText {
                font-size: 15px;
                line-height: 80px;
                display: inline-block;
                color: white;
            }
    
            body {
                font-family: -webkit-pictograph;
            }
        </style>
  • javascript
  • jQuery(function ($) {
              $("#resizeElement").ejResizable({
                  helper: function (event) {
                      return $(event.element); // Object of the Resizable element.
                  },
                resize: function(event)
                  {
                      $(".ResizeText")[0].innerText ="Resizing";
                       $(".Resize").css("cursor","nw-resize");
                  }
    
              });
    
          });

    Output of the above code will be as shown below:

    Before Resize:

    During Resize:

    Helper

    We can resize an element by using helper which will return the object of corresponding resizable element. .

  • javascript
  • jQuery(function ($) {
              $("#resizeElement").ejResizable({
                  helper: function (event) {
                      return $(event.element); // Object of the Resizable element.
                  }
    
              });
    
          });