1

I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.

I have a left pane and a center pane. I dynamically generate div when the user clicks on the left pane. The divs are generated and dropped on the center pane. The divs are draggable and resizable. Everything works fine with dragging and resizing on the visible center area. The moment I drag the div beyond the bottom, the scroll bar on the center pane appears and it seems the center pane is extending to accommodate the new position of the dragged div. But the moment I try to resize the div or add another div, it jumps to the top section of the div and resets the scrollbars. I checked the center div height in firebug and it remains at the same height when initialized even after dragging the new div beyond the bottom.

Here is the test page html code.

Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.

  1. Click on "Add new"
  2. Drag the newly added div beyond the bottom of the center pane.
  3. The center pane shows the scrollbar as it is suppose to.
  4. If you check the center div's height in firebug, it is not changing
  5. Now try resizing the newly added div by dragging its handle
  6. It jumps to the top and the center box loses its scrollbar.

I could not paste the complete html page so here is the reference to the code at the bottom of this thread http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee

And here is the test link http://jsfiddle.net/yZc63/

Nilesh
  • 2,015
  • 3
  • 19
  • 21

2 Answers2

0

I ran into same situation and this answer helped. https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});
Community
  • 1
  • 1
django
  • 2,809
  • 5
  • 47
  • 80
0

I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.

I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.

You can check the solution here http://jsfiddle.net/c7wrT/

Is adding the dynamic div directly to the html body a good approach?

Nilesh
  • 2,015
  • 3
  • 19
  • 21