"resize conatiner"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Reklino/pen/ogmMwp?limit=all&page=10&q=flex+box" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">html { height: 100%; } body { height: 100%; background: #eee; } main { height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-around; align-content: space-around; } .resizable { width: 400px; padding: 2em; text-align: center; position: relative; display: block; background: #fff; } .all { margin: auto; } .rg-right, .rg-left, .rg-top, .rg-bottom { color: red; text-align: center; display: block; width: 50px; height: 50px; line-height: 50px; position: absolute; } .rg-top { cursor: row-resize; top: 0; left: 50%; margin-left: -25px; margin-top: -25px; } .rg-right { cursor: col-resize; right: 0; top: 50%; margin-right: -25px; margin-top: -25px; } .rg-bottom { cursor: row-resize; bottom: 0; left: 50%; margin-left: -25px; margin-bottom: -25px; } .rg-left { cursor: col-resize; left: 0; top: 50%; margin-left: -25px; margin-top: -25px; } </style></head><body> <main ng-app="app" ng-controller="MainController"> <resizable r-directions="['bottom', 'right']"> <h1>Resize Me</h1> <p>Look at me, I'm a resizable directive.</p> </resizable> <resizable class="all" r-directions="['top', 'bottom', 'left', 'right']" r-centered-x="true" r-centered-y="true"> <h1>I resize in all directions</h1> <p>By specifying 'r-centered-x' and 'r-centered-y' as true, I tell the velocity of the resizing to double so that it counteracts the offset from centering.</p> </resizable> </main> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script >angular.module('resizable', []) .directive('resizable', function() { return { restrict: 'AE', scope: { rDirections: "=", rCenteredX: "=", rCenteredY: "=" }, link: function(scope, element, attr) { // add class for styling purposes element.addClass('resizable'); var style = window.getComputedStyle(element[0], null), w = parseInt(style.getPropertyValue("width")), h = parseInt(style.getPropertyValue("height")), dir = scope.rDirections, vx = scope.rCenteredX ? 2 : 1, // if centered double velocity vy = scope.rCenteredY ? 2 : 1, // if centered double velocity start, dragDir, axis, drag = function(e) { console.log(dragDir); var offset = axis == 'x' ? start - e.clientX : start - e.clientY; switch(dragDir) { case 'top': element[0].style.height = h + (offset * vy) + 'px'; break; case 'right': element[0].style.width = w - (offset * vx) + 'px'; break; case 'bottom': element[0].style.height = h - (offset * vy) + 'px'; break; case 'left': element[0].style.width = w + (offset * vx) + 'px'; break; } }, dragStart = function(e, direction) { dragDir = direction; axis = dragDir == 'left' || dragDir == 'right' ? 'x' : 'y'; start = axis == 'x' ? e.clientX : e.clientY; document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', drag, false); w = parseInt(style.getPropertyValue("width")); h = parseInt(style.getPropertyValue("height")); }); document.addEventListener('mousemove', drag, false); }; for(i=0;i<dir.length;i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} (function () { var grabber = document.createElement('div'), direction = dir[i]; // add class for styling purposes grabber.setAttribute('class', 'rg-' + dir[i]); grabber.innerHTML = '|||'; element[0].appendChild(grabber); grabber.ondragstart = function() { return false } grabber.addEventListener('mousedown', function(e) { dragStart(e, direction); }, false); }()) } window.CP.exitedLoop(1); window.CP.exitedLoop(1); } } }); angular.module('app', ['resizable']) .controller('MainController', function($scope) { }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: