resize noresize

resizable nested test

by Laurens Maneschijn

HTML

<hr>resize test:<hr>
<div class="noresize red inlineblock">
	noresize
	<div class="resize green unselectable box100">
		resize
		<div class="hresize blue box50">
			hresize
		</div>
        end
	</div>
    end
</div>

CSS

/* 
 ********** resize: **********
resize is cascading: everything inside will be resizable too.
Not sure why but it is very annoying; prevent this by making all children nonresizable.
(make sure the children disabling is BEFORE the normal css, so the normal css is more important and can still be applied on a deeper level)
overflow:auto/hidden/visible is also needed for resizing to work
*/

.resize   > *{resize:none;}
.noresize > *{resize:none;}
.hresize  > *{resize:none;}
.vresize  > *{resize:none;}
.noresize{resize:none;}
.resize  {resize:both      ;overflow:auto;}
.hresize {resize:horizontal;overflow:auto;}
.vresize {resize:vertical  ;overflow:auto;}


/* various display helpers */

.red  {background-color:#fdd;border:1px solid #f00;}
.green{background-color:#dfd;border:1px solid #0f0;}
.blue {background-color:#ddf;border:1px solid #00f;}

div {
    margin:2px;
    padding:2px;
}
.inlineblock {
    display: inline-block;
}
.box100 {
    width: 100px;
    height: 100px;
}
.box50 {
    width: 50px;
    height: 50px;
}


/* unselectable sub-experiment */

.unselectable{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}