Bootstrap Snippet Textarea with controls using HTML CSS Bootstrap jQuery

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
    <div class="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        
        <div class="test-1">
        <div class="col-md-6">
            <div class="input-controls-container">
                <textarea class="form-control" placeholder="Comment..."></textarea>
                <div class="input-controls">
                    <div class="btn-group">
                        <button class="btn btn-link">
                            <span class="glyphicon glyphicon-paperclip"></span>
                        </button>
                        <button class="btn btn-link">
                            <span class="glyphicon glyphicon-ok"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>      
        
        <div class="col-md-6">
            <div class="input-controls-container expand">
                <textarea class="form-control">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia aliquet justo, vitae ullamcorper lectus dictum in. Nunc pulvinar rutrum erat sed condimentum. Aliquam erat volutpat. Vivamus tristique sem nibh. Pellentesque sollicitudin auctor urna et volutpat. Mauris et ex eu enim molestie ornare. Maecenas fermentum odio ac erat vehicula pretium. Maecenas tincidunt molestie leo, sed semper tortor vulputate quis. Morbi blandit congue augue et volutpat. </textarea>
                <div class="input-controls">
                    <div class="btn-group">
                        <button class="btn btn-link">
                            <span class="glyphicon glyphicon-paperclip"></span>
                        </button>
                        <button class="btn btn-link">
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
.test-1 .input-controls-container {
    position: relative;
}
.test-1 .input-controls-container .form-control {
    height: 32px;
}
/*.input-controls-container .form-control:focus, */
.test-1 .input-controls-container.expand .form-control {
    padding-bottom: 25px;
    height: auto;
}
.test-1 .input-controls-container .input-controls {
    position: absolute;
    bottom: 0;
    right: 10px;
    padding: 2px 0px;
}
.test-1 .input-controls-container.expand .input-controls {
    padding: 0 10px;
}
.test-1 .input-controls-container .input-controls .btn-link {
    padding: 2px 10px;
    color: #555;
}
.test-1 .input-controls-container .input-controls .btn-link:hover {
    color: #111;
}
.test-2 .input-controls-container {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
   $('body')
   .on('focus','.input-controls-container textarea',function(){
      $(this).closest('.input-controls-container').addClass('expand');
   })
   .on('blur','.input-controls-container textarea',function(){
       if ($.trim($(this).val())) {
           return;
       }
      $(this).closest('.input-controls-container').removeClass('expand');
   });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Textarea with controls"
Bootstrap 3.3.0 Snippet by lookbadgers

Related: See More

Questions / Comments:

"Textarea with controls" Bootstrap 3.3.0 Snippet by lookbadgers

Related: See More

Questions / Comments:

"Textarea with controls"
Bootstrap 3.3.0 Snippet by lookbadgers