Customizing jQuery UI Resize – Custom Resize Handle width

August 3, 2023

So I want to resize the panel on the left using jQuery. I have already achieved this with help from SO community but there’s one more thing I’d want to do to make this functionality optimal for the page visitor.

In my current code, the resize interaction area is pretty thin. So sometimes it may be annoying for a visitor to find the sweet spot if they wanted to resize the panel. I wanted to make it bigger and did some digging, found I could use custom resize handles. But either my syntax is horribly wrong, or the other posts about this being a bug in jQuery are still valid.

Here is my current code (I’ll put the one with the custom resizing handle next):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Resize Handle</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">



    <script>
        $(function(){
            $("#left-bar").resizable({ 
                direction: 'right',
                /* resizeWidthFrom: 'left', */
            
                start: function() {
                  $('#left-bar, #topic-window').addClass('ignore-pointer-events');
                },
                stop: function() {
                  $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
                },               
            });
        });
    </script>

    <style>
        
        #center-main{
            background-color: red;
            width: 100%;
            height: 88.25vh;
            margin-top: 3px;
            position:relative;
            outline: thin solid black;
            display: flex;
        }

        #left-bar{
            background-color: yellow;
            min-width: 250px;
            max-width: 90%;
            height: 100%;
            position: relative;
            margin-right: 1px;
            z-index: 10000;
            overflow: hidden;
            flex: 0 0 auto;
        }
            #resize-handle{
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                width:15px;
                background-color: #b3b4b5;
                outline: thin solid darkgray;
            }

        
            #topic-window{
              background-color:#e9e9ed;
              width: 100%;
              outline: thin solid black;
              flex: 1 1 0;
              overflow: hidden;
            }

                #docWindow{
                  width: 100%;
                  height: 100%;        
                  position:relative;
                  background-color: aqua;        
                }

        .ignore-pointer-events > * {
          pointer-events: none;
        }
        
    </style>
</head>
<body>
    
    <div id="center-main">

        <div id="left-bar">
            <div id="resize-handle" ></div>
        </div>
        
        <div id="topic-window">
            <iframe id="docWindow" frameborder="0"></iframe>
        </div>

    </div>





</body>
</html>

Here is what I tried later on for a custom resize handle:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Resize Handle</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">



    <script>
        $(function(){
            $("#left-bar").resizable({
                handles:{ 'e' : '#resize-handle' } ,
            
                start: function() {
                    $('#left-bar, #topic-window').addClass('ignore-pointer-events');
                },
                stop: function() {
                    $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
                }
            });
        });
    </script>

    <style>
        
        #center-main{
            background-color: red;
            width: 100%;
            height: 88.25vh;
            margin-top: 3px;
            position:relative;
            outline: thin solid black;
            display: flex;
        }

        #left-bar{
            background-color: yellow;
            min-width: 250px;
            max-width: 90%;
            height: 100%;
            position: relative;
            margin-right: 1px;
            z-index: 10000;
            overflow: hidden;
            flex: 0 0 auto;
        }
            #resize-handle{
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                width:15px;
                background-color: #b3b4b5;
                outline: thin solid darkgray;
            }

        
            #topic-window{
              background-color:#e9e9ed;
              width: 100%;
              outline: thin solid black;
              flex: 1 1 0;
              overflow: hidden;
            }

                #docWindow{
                  width: 100%;
                  height: 100%;        
                  position:relative;
                  background-color: aqua;        
                }

        .ignore-pointer-events > * {
          pointer-events: none;
        }
        
    </style>
</head>
<body>
    
    <div id="center-main">

        <div id="left-bar">
            <div id="resize-handle" class="ui-resizable-handle ui-resizable-e"></div>
        </div>
        
        <div id="topic-window">
            <iframe id="docWindow" frameborder="0"></iframe>
        </div>

    </div>





</body>
</html>

I’ve also tried one method where I just set handles: null; so that jQuery code is overridden I guess.

Help would be appreciated.

>Solution :

Basically, just add this css:

.resizable .resizable-r {
    width: 30px !important;
}

This will enlarge the right handle bar of the resizable element.

$(function() {
  $("#left-bar").resizable({
    handles: {
      'e': '#resize-handle'
    },

    start: function() {
      $('#left-bar, #topic-window').addClass('ignore-pointer-events');
    },
    stop: function() {
      $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
    }
  });
});

#center-main {
  background-color: red;
  width: 100%;
  height: 88.25vh;
  margin-top: 3px;
  position: relative;
  outline: thin solid black;
  display: flex;
}

#left-bar {
  background-color: yellow;
  min-width: 250px;
  max-width: 90%;
  height: 100%;
  position: relative;
  margin-right: 1px;
  z-index: 10000;
  overflow: hidden;
  flex: 0 0 auto;
}

#resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background-color: #b3b4b5;
  outline: thin solid darkgray;
}

#topic-window {
  background-color: #e9e9ed;
  width: 100%;
  outline: thin solid black;
  flex: 1 1 0;
  overflow: hidden;
}

#docWindow {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: aqua;
}

.ignore-pointer-events>* {
  pointer-events: none;
}

.resizable .resizable-r {
    width: 30px !important;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">



<div id="center-main">

  <div id="left-bar">
    <div id="resize-handle" class="ui-resizable-handle ui-resizable-e"></div>
  </div>

  <div id="topic-window">
    <iframe id="docWindow" frameborder="0"></iframe>
  </div>

</div>