Resizable stops working on div after its contents are updated

Question

I am using jQuery UI's resizable function to make a div (bootstrap panel) that displays the contents of the file uploaded resizable. Resizable works on the div initially but after I update it with the contents of the file uploaded it stops working and the resizable cursor doesn't appear. This behavior can be observed in the snippet below and this jsfiddle.

$("#filePreview").resizable({
  handles: "n, s",
  minHeight: 100
});

function readFile(file) {
  var reader = new FileReader();
  reader.onload = readSuccess;

  function readSuccess(evt) {
    $('#filePreview').text(evt.target.result);
  };
  reader.readAsText(file);
}

$(document).on('change', '#inputFile', function() {
  readFile(this.files[0]);
});

.preview-panel {
  white-space: pre-line;
  overflow-y: scroll;
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <label for="inputFile">File Input</label>
      <input type="file" class="form-control" id="inputFile">
    </div>
  </form>
  <div class="panel panel-default">
    <div class="panel-heading">File Preview</div>
    <div class="panel-body preview-panel" id="filePreview"></div>
  </div>
</div>

I have seen questions on resizable for dynamically added elements and tried reinitializing resizable after the div is updated with the new file content but it didn't work. How do I make resizable work on the div even after its content changes to display the preview of the last uploaded file?

Yass · Accepted Answer · 2016-04-22T20:42:53.113

3

Have you tried "destroying" the resizable div before setting the text and then re-initializing it after setting the text?

function readFile(file) {
  var reader = new FileReader();
  reader.onload = readSuccess;

  function readSuccess(evt) {
    $('#filePreview').resizable('destroy');
    $('#filePreview').text(evt.target.result);
    $("#filePreview").resizable({
      handles: "n, s",
      minHeight: 100
    });
  };
  reader.readAsText(file);
}

I don't know if this is a quirk of the plugin, but you have to scroll to the top of the content in the div in order to see/use the resizable "handles".

EDIT: To fix the issue with the "handle" losing its position when scrolling, I've added a helper function to add a top value using the the scrollTop value of #filePreview + the height of the .preview-panel + an additional offset (27px in this case). Whenever the scroll event is triggered on #filePreview, I'm adjusting the position of the handle accordingly.

$("#filePreview").on('scroll', function() {
  adjustHandlePosition();
});

function adjustHandlePosition() {
  $('.ui-resizable-s').css('top', ($("#filePreview").scrollTop() + $('.preview-panel').height() + 27) + "px");
}

The adjustHandlePosition() method is also being called when the resize event occurs for #filePreview:

$("#filePreview").resizable({
  handles: "n, s",
  minHeight: 100,
  resize: function(event, ui) {
    adjustHandlePosition();
  }
});

Updated Fiddle

edited Apr 22 '16 at 20:42

answered Apr 21 '16 at 20:04

Yass

2,658
3
13
21

Just tired destroy. It is working most of the time but sometimes resizable is not working even with destroy. – Ram Apr 21 '16 at 21:03
What if you scroll to the top of the div and then try to resize? The position of the handle doesn't change when you scroll. – Yass Apr 21 '16 at 21:07
Strange sometimes even without scrolling to the to its working and sometimes its not. Any idea how this can be fixed? – Ram Apr 21 '16 at 21:13
Not sure. I'll take another look when I have time. I'll get back to you if I make any progress. – Yass Apr 21 '16 at 21:22
https://api.jquery.com/scrollTop/ is working where I set scrollTop(0) for the div and it works. – Ram Apr 21 '16 at 21:27
No but its works everytime a new file is uploaded where the vertical scroll goes back to the top automatically. – Ram Apr 22 '16 at 14:08
Yeah. That's what I mentioned in my answer. I've not had time to figure out a solution as I'm at work, but I'll have time later on. – Yass Apr 22 '16 at 14:16
@Ram I've updated my answer and fiddle with a fix that should solve the outstanding issue. Please let me know if there are any issues with the update. – Yass Apr 22 '16 at 19:34
What exactly is 27px representing here? Looks like in cases when the file content is too wide for the panel the horizontal scroll comes up and when the horizontal scroll is displayed the resize handle is not being displayed. – Ram Apr 22 '16 at 20:27
Without the additional 27px, the handle appears above where it should be. The offset ensures the handle appears at the bottom of the panel. – Yass Apr 22 '16 at 20:29
1

I've added some more code that adds an offset conditionally (based on the `scrollWidth` and `clientWidth`). It may need some tweaking in terms of the offset value, but it works on the whole. Please see the updated fiddle. – Yass Apr 22 '16 at 20:44
Thanks, it works now even with the horizontal scroll bar. – Ram Apr 22 '16 at 20:46
No probs. Happy to help. – Yass Apr 22 '16 at 20:47

Resizable stops working on div after its contents are updated

1 Answers1