Photoshop Question posted in
The official user guide can be found here.

Vertically resize DIV elements within parent height – Photoshop

Demoralizes to see downvotes, I really did my best (I believe) to explain my issue and keep it short and simple. If you find hard to understand the question I’m willing to follow-up with any improvement suggestions :,(

I’m trying to create a 100% height vertical sidebar that has N number of resizable children elements – something like Facebook sidebar (chat…) or Photoshop’s sidebar

enter image description here

where the children do not exceed the parent height and resizing one element the other should resize accordingly, so practically the added children heights should always match the (100%) parent height.

I tried to resize table rows but again without success…
This what I have so far using CSS3 flex (seemed like a good idea) 🙁

$("#panel>div").resizable({
  handles:'s'     /* try using "n" to see what happens... */
});
*{margin:0; box-sizing: border-box;}
html, body{height:100%;}
[class^=ui-resizable]{height:2px;background:#08f;cursor:row-resize;}

#panel{
  display:flex;
  flex-direction: column ;
  height:100%;
  width:200px;
}
#panel>div{
  flex: 1;
  background:#aaa;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="panel">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

You can clearly see in the above demo that due the use of flex jQuery is unable to resize the elements….

How would you approach to this problem (without plugins)? thanks

Tags:

2

Answers


  1. 0

    CSS3 flexboxes aren’t very well supported and might not be very well suited to this task. Set resize: vertical on the elements and use a javascript listener to resize all of your divs when one is resized. I don’t know how specifically you want to implement resizing and I don’t have the patience to write something that involved from scratch for no pay, but what I can offer you is a little javascript that might help you add event listeners to all of the elements of a class.

    function resizeboxes() {
    //resize your boxes here.
}

sections = document.querySelectorAll(".resizable-boxes");
for(i = 0; i < sections.length; i++){
    sections[i].addEventListener("resize", resizeboxes);
}
    Login or Signup to reply.
  2. 0

    Turned out i had some time after all 🙂 fiddle

    So key code in this is that when you start resizing you select a neighbour you also want to resize as such:

    if ($(this).next('.resiz').length>0){
    other= $(this).next('.resiz');
 }else{
    other = $(this).prev('.resiz');
 }
 startingHeight= other.height();

    And store it’s height. Then when we resize, we also resize the other one as such

     resize:function(e,ui){
     var dh = ui.size.height-ui.originalSize.height;
     if (dh>startingHeight){// can't resize the box more then it's neighbour
         dh =  startingHeight;
         ui.size.height = ui.originalSize.height+dh;
     }
     other.height(startingHeight-dh);
 }

    Hope that works for you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search