CODEWITHSUNDEEP
javascriptjquerycssflexboxjquery-ui-resizable
Skeets
Skeets

Reputation: 4838

JQuery Resizable + flexbox + jQuery dialog = backwards resizing

I'm trying to make a dialog with 2 vertical sections that fill a JQuery dialog. The 2 sections should take up all the space, and there is a divider in the middle to determine how much space each section takes. I'm using flexbox and JQuery resizeable.

So far it works great! .... Except that the control for the resize is flipped. dragging down makes the bottom section larger, while dragging up makes the top section larger. :P (The handle doesn't follow the mouse at all)

Is there anyway I can flip the direction that a jQuery resizeable resizes? Or is there a better way to solve this issue?

Here is what I have so far:

https://jsfiddle.net/ezjpL1t1/3/

$(".theDialog").dialog({
  resizable: true,
  autoOpen: true,
  height: 400
});


$(".B").resizable({
  handles: {
    's': '.handle'
  },
  resize: function(event, ui) {
    ui.element.css('width', 'auto');
  }
});
textarea {
  height: calc(100% - 50px) !important;
  width: calc(100% - 75px) !important;
  resize: none;
}
.AB {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.A {
  overflow-y: auto;
  flex: 2;
}
.B {
  min-height: 100px;
  overflow-y: hidden;
}
.handle {
  height: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class='theDialog'>
  <div class='AB'>
    <div class="A">
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT

    </div>
    <div class='B'>
      <hr class='handle'>
      <textarea maxlength='50000'></textarea>
      <button>reply</button>
    </div>
  </div>
</div>

Upvotes: 1

Views: 995

Answers (1)

Skeets
Skeets

Reputation: 4838

alright, I found a work-around. I just avoided using resizeable and jQuery draggable, and made a custom solution. Here was the result if you are interested:

https://jsfiddle.net/817b3916/5/

  $(".handle").mousedown(function(event){
    var offset = event.pageY;
     $(".handle").data("yPos",offset);
     $(".handle").data("height",$(".A").height());
     $(".handle").data("mouseDown","yes");
  });

  $(document).mouseup(function(){
     $(".handle").data("mouseDown","no");
  });


  $(document).mousemove(function(event){ 
  if( $(".handle").data("mouseDown") != "yes" ){
    return true;
  }
    var offset          = event.pageY;
    var newHeight   = $(".handle").data("height") - (($(".handle").data("yPos")-offset));
    var newHeightB  = $(".AB").height()-newHeight;
    if( newHeightB < parseInt($(".B").css('min-height'),10) ){
        newHeightB  = parseInt($(".B").css('min-height'),10);
      newHeight     = $(".AB").height()-newHeightB;
    }
    if( newHeight < parseInt($(".A").css('min-height'),10) ){
        newHeight   = parseInt($(".A").css('min-height'),10);
      newHeightB    = $(".AB").height()-newHeight;
    }
    $(".A").height(newHeight);
    $(".B").height(newHeightB);



  });

I think it's pretty straight-forward, comment if you want an explanation or have an improvement.

Upvotes: 1

Related Questions