Resize A Div To Smaller Than Its Declared Size?

February 28, 2024 Post a Comment

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 load it later a

Solution 1:

If you want to use the CSS3 UI resize feature, then your browser decides whether you can make it smaller or bigger than declared width or height. http://www.w3.org/TR/css3-ui/#resize

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

In Firefox for example, you can resize it smaller than your declared width or height. Whilst in chrome you cannot.

Solution 2:

Just want to make a slight modification to what Pfft said in the accepted answer.

If you use the :active pseudo-class instead of :hover it doesn't have the flicker when you hover over the element. That flicker is really annoying.

div:active {
  width: 0;
  height: 0;
}

By using :active what happens is when clicking on the element it will be resized to the height: 0, width: 0 so a little dot where the 1px border is will be shown but as soon as the user starts resizing you get exactly what you would want in resizing. And on every subsequent resize there is no glitch and it just works perfectly.

I find this to be much less annoying than using hover. Thanks to Pfft for the above response, it was exactly what I was looking for and led me to my own slightly altered solution!

Here's a jsfiddle of it: http://jsfiddle.net/kronenbear/v4Lq5o09/1/

Solution 3:

You requested a workaround for your problem, or was wondering how-to at least. I made you a simple workaround that might require a little work; note it is a workaround, and might therefore contain glitches.

.cls {
    width: 100px;
    height: 100px;
    resize: both;
    overflow: auto;
    border: 1px dotted #000;
}

.cls:hover {
    width: 1px;
    height: 1px;
}

Updated fiddle: http://jsfiddle.net/FNXnD/1/

Note Chrome, and Safari might change the CSS3 resize feature in future versions.

Solution 4:

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

<!DOCtype html><htmllang="en"><head><title>Adjustable Window</title><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="../css/adjWindow.css"><linkrel="stylesheet"type="text/css"href="../jquery-ui-1.11.4/jquery-ui.min.css"><scripttype="text/javascript"src="../js/jquery.min.js"></script><scripttype="text/javascript"src="../jquery-ui-1.11.4/jquery-ui.min.js"></script><scripttype="text/javascript"src="../js/adjWin.js"></script></head><bodyid="top"><divclass="winWrap"><divclass="handles"><divclass="draggable"><p>Window Title</p></div><divclass="window"><divclass="windowContent"></div></div></div></div></body></html>

CSS

.winWrap {
    position: relative;
    width: 500px;
    height: 500px;
}
.draggable {
    position: relative;
    width: 100%;
    height: 20px;
    box-shadow: inset 0px0px6pxrgba(0,0,0,0.9);
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    z-index: 1;
}
.draggablep {
    padding: 2px;
    margin: 0px;
    cursor: default;
}
.handles {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    overflow: visible;
    box-shadow: 20px15px20pxrgba(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 0px0px10pxrgba(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'});
});

Solution 5:

$('.cls').css('height', 200);
$(".cls").mouseup( function(){
var height = $(".cls").height();
var width = $(".cls").width();
if(height>=200){
$('.cls').css('height', 200);
}
if(width>=100){
$('.cls').css('width', 100);  
}
var
newdimensions="newheight="+height+"&"+"newwidth="+width;
});

Html5 Lite