Resize a div to smaller than its declared size?

Question

Is there a way to resize a div to smaller than the declared height and width?

I\'m making an application where the user can resize a div and save it. However, when I loa

Answer 1

Or you can use jQuery-UI to make a resizable window.

I went ahead and addressed some issues I experienced when trying to use the jQuery ui resizable widget with a div that had a scroll overflow. The issue was that the resize handles were positioned inside of the scrollbars.

To fix this I made three divs nested inside of each other

The first one is the Wrapper and is where you set the starting size of the div.

The second one is for the handles and its size should be set to 100% of its parent div (the wrapper div). You will have to adjust the z-index to position them onto of the eventual scrollbars.

The second div should also contain the draggable handle div and the window div where all your windows content will be.

Both the draggable handle div (.draggable) and the window div (.window) need to be positioned relatively. So that they are positioned properly with each other and so the draggable handle won't be over the top of your scrollbars.

The .window div should be scaled to 100% the parent div just as the div before. This one will have a scroll overflow. Now because this is equal to 100% the handles div when you resize the handle div with jQuery ui it will also resize this div.

Set the draggable div to a width of 100% and a height of whatever you want but any added height will push the window div down further then the handle div and you will need to add an equal amount of padding-bottom to the handle div to fix this. You will also need to set the handles div overflow to visible.

After all that add whatever styling you want to the different elements and you should be good. Its hard to explain but, I hope it makes sense. All the code is below and hopefully it helps explain better then my rambling. This will definitely allow you to resize the window smaller, move the div around and also have a scroll overflow with your div should you want it.

HTML

    
    
    
    
    
    
    


   

        

            
Window Title
            

                

                
            
        
    

CSS

.winWrap {
    position: relative;
    width: 500px;
    height: 500px;
}
.draggable {
    position: relative;
    width: 100%;
    height: 20px;
    box-shadow: inset 0px 0px 6px rgba(0,0,0,0.9);
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    z-index: 1;
}
.draggable p {
    padding: 2px;
    margin: 0px;
    cursor: default;
}
.handles {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    overflow: visible;
    box-shadow: 20px 15px 20px rgba(0,0,0,0.4);
    z-index: 1;
}
.window {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.7);
}
.windowContent{
    position: absolute;
}

jQuery and jQuery-UI it's a good idea to use the minHeight and minWidth options with the resizable widget otherwise your window will be able to be resized to almost nothing and could cause some annoying side effects like making the div so small that you need to reload the page to click the resizing handles. It also just looks more professional in my opinion.

For the draggable widget you target the wrapper for the entire div you want to move around and then give it a handle of the draggable div we placed in our window div.

/*global $, jQuery, alert*/
$(document).ready(function () {
    'use strict';
    $('.handles').resizable({minHeight: 100, minWidth: 100});
    $('.winWrap').draggable({handle: '.draggable'});
});