Bootstrap Snippet Column Editor using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<section id="editor" class="row">
    <div class="col-canvas col-md-2">
        <span>Account List</span>
    </div>
    <div class="col-canvas col-md-8">
        <ul class="wrapper">
            <li class="report-column">
                <header>A</header>
            </li>
            <li class="report-column">
                <header>B</header>
            </li>
            <li class="report-column">
                <header>C</header>
            </li>
            <li class="report-column">
                <header>D</header>
            </li>
            <li class="report-column">
                <header>E</header>
            </li>
            <li class="report-column">
                <header>F</header>
            </li>
            <li class="report-column">
                <header>G</header>
            </li>
            <li class="report-column">
                <header>H</header>
            </li>
            <li class="report-column">
                <header>I</header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.col-canvas {
    border: 5px dashed #939393;
    height: 500px;
    overflow-y: hidden;
    overflow-x: auto;
}
.wrapper {
    list-style: none;
    white-space: nowrap;
}
.report-column {
    height: 460px;
    border: 2px solid #3f3f3f;
    background-color: #f2f2f2;
    margin-top: 5px;
    border-radius: 0px 3px 0px 3px;
    padding: 10px;
    width: 200px;
    display: -moz-inline-box;
    display: inline-block;
}
.report-column header {
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    padding-bottom: 5px;
}
.add-column {
    border: 2px dashed #939393;
    background-color: transparent;
    text-align: center;
    width: 100px;
    display: -moz-inline-box;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
/*$('.add-column').hover( 
    function() {
        window.console && console.log('hover');
        $('.add-column > i').addClass('hidden');
        $('#add-choices').removeClass('hidden'); 
});*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Column Editor"
Bootstrap 3.1.0 Snippet by timdockins

Related: See More

Questions / Comments:

"Column Editor" Bootstrap 3.1.0 Snippet by timdockins

Related: See More

Questions / Comments:

"Column Editor"
Bootstrap 3.1.0 Snippet by timdockins