<!DOCTYPE html>
<html>
<head>
<title>TEST Material Design for Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.css" rel="stylesheet">
<link href="dist/css/ripples.css" rel="stylesheet">
<!-- Dropdown.js -->
<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
<!-- Page style -->
<link href="index.css" rel="stylesheet">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!--<div class="form-group">-->
<!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
<!--<div class="col-lg-10">-->
<!--<input type="text" readonly class="form-control floating-label" placeholder="Browse...">-->
<!--<input type="file" id="inputFile" multiple>-->
<!--</div>-->
<!--</div>-->
<!--
<div class="fileinput input-group fileinput-new" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="hidden" value="" name=""><input type="file" name="">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
-->
<div class="row">
<div class="form-group">
<label for="inputFile" class="col-lg-2 control-label">Static Label</label>
<div class="col-lg-10">
<input type="text" readonly class="form-control" placeholder="Browse...">
<input type="file" id="inputFile" multiple>
</div>
</div>
</div>
<!-- this works
<div class="form-group">
<input type="file" id="inputFile" multiple>
<input type="text" readonly class="form-control" placeholder="Browse...">
</div>
-->
<!--<h2>File inputs</h2>-->
<!-- http://codepen.io/kybarg/pen/PqaOOg -->
<div class="form-group">
<label class="control-label" for="inputFile2">Static label</label>
<input type="file" id="inputFile2" multiple>
<input type="text" readonly class="form-control" placeholder="Browse2...">
</div>
<div class="form-group">
<!--<label class="control-label" for="inputFile3">File</label>-->
<input type="file" id="inputFile3" multiple>
<input type="text" readonly class="form-control" placeholder="Placeholder only...">
</div>
<div class="form-group">
<input type="file" id="inputFile4" multiple>
<div class="input-group">
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-fab-mini btn-raised btn-sm">
<i class="mdi-editor-attach-file"></i>
</button>
</span>
</div>
</div>
</div>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.js"></script>
<script src="dist/js/ripples.js"></script>
<script>
$.material.init();
</script>
<!-- Sliders -->
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script>
$(function () {
$.material.init();
$(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
$(".svert").noUiSlider({
orientation: "vertical",
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
});
</script>
-->
<!-- Dropdown.js -->
<!--
<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>
<script>
$("#dropdown-menu select").dropdown();
</script>
-->
</body>
</html>