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>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.css">
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview-theme-basic.css">
</head>
<body ng-app="bin">
  
  <div ng-controller="DemoCtrl as demo">
    <h3>Custom Node Templates</h3>
    <p>A custom template with some spicy ASCII checkboxes. Defined inline via the <code>ivh-treeview-node-tpl</code> attribute.</p>
    <div ivh-treeview="demo.stuff"
         ivh-treeview-node-tpl="demo.tpl">
    </div>
  </div>
​
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
  <script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.js"></script>
</body>
</html>
 
​
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
  
}
​
.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
​
}
​
.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
    background-color: yellow;
}
​
.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}
​
.custom-checkbox-primaryblue .custom-control-label {
    outline: none;
    white-space: nowrap;
  position: relative;
    margin-bottom: 0;
    background-color: yellow;
}
​
​
.custom-control-input:checked + .custom-control-label::before {
  background-color:blue;
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers