F. Flores F. Flores - 3 months ago 6
CSS Question

Blank space between table and div with label

I have this table with RowFilter function and I show a message for no results found, this message is a label inside a hidden div, the problem is that appears thead items and the next line it's supposed to be the div with the label but not, appears a blank space and then the label. I tried to solve this adding padding 0% to my label and then to the div but nothing work.

Here is my code:



$(document).ready(function () {
RowFilter();
});

function RowFilter() {
var busqueda = document.getElementById('buscar');
var noResults = document.getElementById('no-results');
var table = document.getElementById("Tabla2").tBodies[0];

buscaTabla = function () {
texto = busqueda.value.toLowerCase();
var match = false;
var r = 0;
while (row = table.rows[r++]) {
if (row.innerText.toLowerCase().indexOf(texto) !== -1) {
row.style.display = null;
match = true;
}
else {
row.style.display = 'none';
}
}
if (!match) {
noResults.style.display = 'block';
}
else {
noResults.style.display = 'none';
}
}
busqueda.addEventListener('keyup', buscaTabla);
}

#no-results {
display: none;
text-align: center;
font-weight: bold;
}

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input class="form-control" placeholder="Search..." id="buscar" type="text"/>
</div>

<hr />
<table id="Tabla2" class="table table-striped">
<thead>
<tr class="info">
<td>ID</td>
<td>Name</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mike</td>
<td>N/A</td>
</tr>
<tr>
<td>2</td>
<td>Steven</td>
<td>N/A</td>
</tr>
<tr>
<td>3</td>
<td>Tyler</td>
<td>Active</td>
</tr>
</tbody>
</table>
<div id="no-results" >
<label style="width:100%; margin-top:0%;" class="control-label label-warning">No results found... </label>
</div>





Pen with code

Answer

Bootstrap's table is a margin-bottom: 20px. You can over this value (set to 0) or set the margin-top of your label as -20px.

Option #1:

<table id="Tabla2" class="table table-striped" style="margin-bottom: 0">

Option #2:

<div id="no-results" style="margin-top: -20px;">

In my opinion, due to that fact that bootstrap's layout will affect all your layout, in this case it will be better to change the margin-top of the no-result div.
Here is a working codepen: http://codepen.io/anon/pen/pbrvQm