Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style src="https://code.jquery.com/jquery-3.1.0.css"></style>
​
</head>
<body>
    <div class="sk-sameheight container-fluid">
          <div class="row editorPanelRow">
            <div class="col-xs-8 sk-editor-norightgutter">
              <div style="height: 400px; background-color: red">Hellow</div>
            </div>
            <div class="col-xs-4 sk-editor-noleftgutter">
              <div style="border-radius: 4px; border: 1px solid rgb(204, 204, 204); border-image: none;">
                <label class="k-header k-grid-toolbar k-grid-top positionDescription" for="Data_Description">Descriere</label>
                <span class="editorWidth positionDescription">This text is variable
This control should expand as the div in left
Also it should support scrolling if the text is greater than the allocated space
Extra
Extra
Extra
                </span>
              </div>
            </div>
          </div>
  </div>
</body>
</html>
​
 
    .sk-editor-noleftgutter:not(.col-xs-12) {
        padding-left: 0;
    }
​
    .sk-editor-norightgutter:not(.col-xs-12) {
        padding-right: 0;
    }
​
.sk-sameheight .row [class*='col-'] {
    float: none;
    display: table-cell;
    vertical-align: top;
}
.sk-sameheight .row {
    display: table;
}
.editorWidth {
    width: 100%;
}
.positionDescription {
    overflow: auto;
    resize: none;
    -ms-overflow-style: auto;
}
​
label.positionDescription {
    font-weight: 400;
    line-height: normal;
}
​
span.positionDescription {
    white-space: pre-wrap;
    min-height: 2.8em;
    background-color: blue;
    display: inline-block;
    color: white;
}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers