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">
  <meta name="viewport" content="width=device-width">
​
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
​
  <link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"
  <title>JS Bin</title>
</head>
<body>
  
   
 
​
​
    <div class="col-md-3 ml-auto">
                          <span  class="btn btn-rose btn-round btn-file pull-right">
                            <span class="fileinput-new">Upload File(s)</span>
                          
                            <input  type="file" id="shapefiles-files" name="shapefiles-files" accept=".shp,.prj,.dbf,.cpg,.shx,.sbn,.sbx," multiple>
                         </span>
                         </div>
  
   <table id="datatables" class="table table-striped table-no-bordered table-hover dataTables_paginate dataTables_processing DataTables_sort_wrapper" cellspacing="0" width="100%" style="width:100%">
         <thead>
                         <tr>
                          <th class="text-center disabled-sorting">#</th>
                          <th class="text-center disabled-sorting">Selected</th>
                          <th class="text-center" >Layer Name</th>
                         <th class="text-center disabled-sorting">Description</th>
                          <th class="text-center">Status</th>
                          <th class="text-center">Actions</th>
                        </tr>
                      </thead>
                      <tfoot>
                          <tr>
                          <th class="text-center disabled-sorting">#</th>
                          <th class="text-center disabled-sorting">Selected</th>
                          <th class="text-center">Layer Name</th>
                          <th class="text-center disabled-sorting">Description</th>
                          <th class="text-center">Status</th>
                          <th class="text-center">Actions</th>
                        </tr>
                      </tfoot>
                      <tbody id="geo-layers-list">
                   
​
                        <tr>
        <td class="text-center">1</td>
        <td class="text-center">
            <div class="form-check">
                <label class="form-check-label">
               <input class="form-check-input" type="checkbox" value="" checked>
               <span class="form-check-sign">
                 <span class="check"></span>
               </span>
             </label>
            </div>
        </td>
        <td class="text-center">Layer Name</td>
        <td>
            <textarea id="geolayer-description" name="geolayer-description" maxlength="300"></textarea>
        </td>
        <td class="text-center">unknown</td>
        <td class="text-right">
            <button type="button" rel="tooltip" class="btn btn-danger btn-link" id="up_remove">
             <i class="material-icons">delete</i>
           </button>
        </td>
    </tr>
    
  
​
         </tbody>
        
      </table> 
   <script id="uploadlayers-template" type="text/x-handlebars-template">
    \{{#if layers}}
    \{{#each layers}}
    <tr role="row">
        <td class="text-center">\{{lookup ../number @index}}</td>
        <td class="text-center">
            <div class="form-check">
                <label class="form-check-label">
               <input class="form-check-input" type="checkbox" value="" checked>
               <span class="form-check-sign">
                 <span class="check"></span>
               </span>
             </label>
            </div>
        </td>
        <td class="text-center">\{{geoLayerName}}</td>
        <td>
            <textarea id="geolayer-description" name="geolayer-description" maxlength="300"></textarea>
        </td>
        <td class="text-center">unknown</td>
        <td class="text-right">
            <button type="button" rel="tooltip" class="btn btn-danger btn-link" id="up_remove">
             <i class="material-icons">delete</i>
           </button>
        </td>
    </tr>
  
      \{{/each}}
       
     
      \{{/if}}
  </script>
  <script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src ="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
  
  
  
  
</html>
Output 300px

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

Dismiss x