Whitespaced Selected 2
The 'add files' behavior trigger not just on the input itself, but also the space after it, until it hits two list items.
HTML
<body class=' dashboard-index dashboard index' data-action='index' data-controller='dashboard'>
<div class='row'>
<div class='col-xs-12'>
<div class='row'>
<div class='col-sm-12'>
<div class='col-md-3'>
<div class='box' style='margin: 0 0 40px;'>
<div class='box-header'>
<h2>
<i class='fa fa-align-justify'></i>
Do You Want to ..
</h2>
</div>
<div class='box-content'>
<table style='margin-bottom: 0;'>
<tr style='border-bottom: 1px solid #e0e2e5'>
<td>
<span class='fileinput-button' style='color: #008fd2;'>
<i class='fa fa-upload'></i>
<span>
<i class="fa fa-fa-upload"></i> Add files...
</span>
<input id='fileupload' multiple='' name='files[]' style='height: 20px; width: 100%;' type='file'>
</span>
</td>
</tr>
</table>
</div>
</div>
<div class='box'>
<div class='box-header'>
<h2>
<i class='fa fa-check'></i>
To Do List
</h2>
</div>
<div class='box-content'>
<div class='todo'>
<ul class='todo-list ui-sortable'>
<li>
<span class='todo-actions'>
<!-- %a{:href=>"#"} -->
<!-- %i.fa.fa-check-empty -->
<form action='/cards/update' id='to-do' method='post'>
<input class='to-do-check' data-method='put' data-remote data-url='/dashboard/complete?id=379' id='379' style='margin-top: 0;' type='checkbox'>
...
CSS
@charset "UTF-8";
/*
* jQuery File Upload Plugin CSS 1.3.0
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
/* Here begins custom CSS. Should not be relevant here. */
div.count div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: white;
}
div.count:after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
background: red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
div.count.pending:after {
background: #aaacaf;
}
body.contracts-index div.count,
body.organizations-index div.count,
body.people-index div.count {
position: absolute;
top: 4px;
right: 5px;
}
.smallstat {
background: none repeat scroll 0 0 white;
padding: 10px;
position: relative;
font-family: Lato, sans-serif;
}
.smallstat .boxchart-overlay {
border-radius: 2px;
float: left;
margin-right: 10px;
overflow: hidden;
padding: 10px;
text-align: center;
width: 84px;
}
.smallstat .boxchart-overlay.blue {
background: none repeat scroll 0 0 #36a9e1;
}
.smallstat .boxchart-overlay.red {
background: none repeat scroll 0 0 #ff5454;
}
.smallstat .boxchart-overlay.yellow {
background: none repeat scroll 0 0 #eae874;
}
.smallstat .boxchart-overlay.green {
background: none repeat scroll 0 0 #bdea74;
}
.smallstat i {
border-radius: 2px;
color: white;
display: block;
float: left;
font-size: 22px;
margin-right: 10px;
padding: 14px 0;
text-align: center;
width: 80px;
}
.smallstat i.blue {
background: none...