JQuery Split div issue

Question

I am trying to create a pair of resizable sidebars using jQuery and jQueryUI (but not completely necessary).

The issue I am running into is that it doesn't resize properly. The right sidebar is giving me issues as it resizes the left works completely fine. I want to know how to mimic the behavior of the left side bar in regards to how it works well for the right sidebar

I don't know how to fix it, split.js was recommended but I can't get that to work. My project is a simple one that shouldn't require a complicated set up, any help will do.

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".right-sidebar").resizable({
    handles: "w",
    minWidth: 100,
    maxWidth: 500,
  });
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

Answer 1

Is this what you want ?

You could set left to 0 during resize by adding this :

 resize: function(event, ui) {
      ui.position.left = 0;
 }

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".right-sidebar").resizable({
    handles: "w", 
    resize: function(event, ui) {
      ui.position.left = 0;
    },
    minWidth: 100,
    maxWidth: 500,
  });
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

Answer 2

The issue is related to how E vs W resize happens. When you perform a Resize on the E Handle, the elements Width is changed. When you resize on the W, the Left position is changed, as well as the Width.

Example:

$("#resizable").resizable({
  maxWidth: 500,
  minWidth: 100,
  handles: "w",
  resize: function(e, ui) {
    console.log(ui.element.css("left"), ui.size.width);
  }
});

#resizable {
  width: 100px;
  height: 100px;
  background: #ccc;
  right: 0;
  position: absolute;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="resizable"></div>

To properly make the Right Sidebar operate in the same way as the Left, we just need to perform two actions:

• Make the Main Content width grow or shrink as needed
• Grown and Shrink the Right Sidebar the opposing amount

Consider making the Main Content resizable and at the some time, change the Width of the Right Sidebar, in a reversed fashion.

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".main-content").resizable({
    handles: "e",
    resize: function(e, ui) {
      var t = $(".container").width();
      var l = $(".left-sidebar").width() + ui.size.width;
      $(".right-sidebar").css({
        maxWidth: "500px",
        minWidth: "100px"
      }).width(t - l);
    }
  });
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />