"resize"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/jasesmith/pen/BwNqdX?limit=all&page=21&q=panel" /> <style class="cp-pen-styles">:root { --active: #0ebeff; --resizer-bg: transparent; --resizer-width: .5em; --timing: 300ms; --width-diff: calc(100vw - var(--width, 30vw)); } .resizer { position: relative; z-index: 1; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: var(--resizer-width); margin-right: calc(var(--resizer-width) * -1); cursor: col-resize; background: var(--resizer-bg); -webkit-transition: background 200ms linear; transition: background 200ms linear; } .resizer:hover { --resizer-bg: var(--active); } .is-resizing { --resizer-bg: var(--active); --timing: 50ms; } aside { width: var(--width); -webkit-transition: width var(--timing) ease-out; transition: width var(--timing) ease-out; } section { width: var(--width-diff); } body { height: 100vh; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; font-family: Helvetica, sans-serif; } main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } section { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: auto; } aside { -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: auto; } .content-wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 1em; } pre span { color: #ff4593; } pre span span { color: var(--active); } h2, h3 { font-weight: 200; margin: 0 0 .5em 0; } h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } h3::before { content: ''; border: .5em solid transparent; } aside { background: #313435; background-image: -webkit-linear-gradient(150deg, #281234, #4b96cf), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/107782/jeans.jpg); background-image: linear-gradient(-60deg, #281234, #4b96cf), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/107782/jeans.jpg); background-size: cover; background-position: 100% 50%; background-blend-mode: overlay; color: #eee; } aside h3 { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } aside h3::before { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; border-left-color: var(--active); border-width: .4em 0 .4em .6em; margin-left: .5em; } section { background: #eee; } section h3::before { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; border-right-color: var(--active); border-width: .4em .6em .4em 0; margin-right: .5em; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row > * + * { padding-left: 2em; } </style></head><body> <main> <aside> <div class="content-wrap"> <!-- DEMO CONTENT --> <h3><code><aside></code></h3> </div> </aside> <div class="resizer" seed="20" max="65" threshhold="5"></div> <section> <div class="content-wrap"> <!-- DEMO CONTENT --> <h3>Drag Me / Double-Click Me</h3> <div class="row"> <div> <p><b>BASIC STRUCTURE</b></p> <pre><code><main style="<span id="

Related: See More

Argon Dashboard
Resize & Fixed Header (shrinking header)

Questions / Comments: