Eu estou fazendo uma pequena aplicação Java Web com Bootstrap, mas eu estou com um erro em uma página onde utilizo uma tabela. Quando eu tenho mais de oito linhas na tabela, os botões que ficam abaixo da tabela somem, achei que a página iria ativar o rolamento da página ou o rolamento da tabela em si. Não sei como fazer para fazer o rolamento da página aparecer. Segue abaixo o código, o preenchimento dele é através do Java, mas vou inserir algumas linhas como hardcode pra efeito de visualização, que é o meu problema.
PS: Não estou conseguindo fazer o código utilizar o Boostrap aqui na página do StackOverFlow, o que eu acho estranho, já que no código eu faço referência a links de estilização online e não uso links de arquivos locais. Por isso vou colocar a imagem da execução na minha máquina também.
Código Original
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odonto Cascadura</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body>
<div class="container-fluid">
<header>
<nav class="navbar navbar-default" style="background-color: #4682B4; border-color: #4682B4;">
<ul class="nav navbar-nav">
<li><a href="#" style="color: #FFFFFF">Painel</a></li>
<li><a href="#" style="color: #FFFFFF">Agenda</a></li>
<li><a href="#" style="color: #FFFFFF">Pacientes</a></li>
<li><a href="#" style="color: #FFFFFF">Profissionais</a></li>
<li><a href="#" style="color: #FFFFFF">Financeiro</a></li>
<li><a href="#" style="color: #FFFFFF">Relatórios</a></li>
<li><a href="#" style="color: #FFFFFF">Configurações</a></li>
</ul>
</nav>
</header>
<div class="content-wrapper">
<section class="content">
<main>
<div class="box-header with-border">
<h3 class="box-title col-md-12">Pacientes</h3>
</div>
<!-- /.box-header -->
<table class="table table-hover" overflow="scroll">
<thead>
<tr>
<th> </th>
<th>Id</th>
<th>Nome</th>
<th>CPF</th>
<th>RG</th>
</tr>
</thead>
<tbody>
<c:forEach var="paciente" items="${pacientes}">
<tr data-href="#">
<td><a class="btn btn-primary" href="mvc?logica=RemoverPacienteLogica&id_paciente=${paciente.id_paciente}">Remover</a></td> <td>${paciente.id_paciente}</td> <td>${paciente.nome_paciente}</td> <td>${paciente.rg}</td> <td>${paciente.cpf}</td>
</tr>
</c:forEach>
</tbody>
</table>
<script>
$(function(){
$('.table tr[data-href]').each(function(){
$(this).css('cursor','pointer').hover(
function(){
$(this).addClass('active');
},
function(){
$(this).removeClass('active');
}).click( function(){
document.location = $(this).attr('data-href');
}
);
});
});
</script>
<!-- /.tabpanel 3 -->
<!-- <nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#aba1" role="tab" data-toggle="tab">1</a></li>
<li><a href="#aba2" role="tab" data-toggle="tab">2</a></li>
<li><a href="#aba3" role="tab" data-toggle="tab">3</a></li>
</ul>
</nav>
<script>
submitForms = function(){
document.getElementById("form1").submit();
}
</script> -->
</main>
<button type="button" class="btn btn-primary">Novo Procedimento</button>
<a href="mvc?logica=NovoPacienteLogica" role="button" class="btn btn-primary">Novo Paciente</a>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
</div>
<!-- /.container-fluid -->
<footer class="navbar navbar-inverse navbar-fixed-bottom" style="background-color: #4682B4; border-color: #4682B4;">
<div class="container-fluid">
<p class="text-muted"><font color="#FFFFFF"> Odontologia</font></p>
</div>
</footer>
</body>
</html>
Código com hardcodes para questões de visibilidade
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odonto Cascadura</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body>
<div class="container-fluid">
<header>
<nav class="navbar navbar-default" style="background-color: #4682B4; border-color: #4682B4;">
<ul class="nav navbar-nav">
<li><a href="#" style="color: #FFFFFF">Painel</a></li>
<li><a href="#" style="color: #FFFFFF">Agenda</a></li>
<li><a href="#" style="color: #FFFFFF">Pacientes</a></li>
<li><a href="#" style="color: #FFFFFF">Profissionais</a></li>
<li><a href="#" style="color: #FFFFFF">Financeiro</a></li>
<li><a href="#" style="color: #FFFFFF">Relatórios</a></li>
<li><a href="#" style="color: #FFFFFF">Configurações</a></li>
</ul>
</nav>
</header>
<div class="content-wrapper">
<section class="content">
<main>
<div class="box-header with-border">
<h3 class="box-title col-md-12">Pacientes</h3>
</div>
<!-- /.box-header -->
<table class="table table-hover" overflow="scroll">
<thead>
<tr>
<th> </th>
<th>Id</th>
<th>Nome</th>
<th>CPF</th>
<th>RG</th>
</tr>
</thead>
<tbody>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
<tr data-href="#">
<td><a class="btn btn-primary" href="#">Remover</a></td> <td>1</td> <td>aaaa</td> <td>1111</td> <td>2222</td></tr>
</tbody>
</table>
<script>
$(function(){
$('.table tr[data-href]').each(function(){
$(this).css('cursor','pointer').hover(
function(){
$(this).addClass('active');
},
function(){
$(this).removeClass('active');
}).click( function(){
document.location = $(this).attr('data-href');
}
);
});
});
</script>
<!-- /.tabpanel 3 -->
<!-- <nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#aba1" role="tab" data-toggle="tab">1</a></li>
<li><a href="#aba2" role="tab" data-toggle="tab">2</a></li>
<li><a href="#aba3" role="tab" data-toggle="tab">3</a></li>
</ul>
</nav>
<script>
submitForms = function(){
document.getElementById("form1").submit();
}
</script> -->
</main>
<button type="button" class="btn btn-primary">Novo Procedimento</button>
<a href="mvc?logica=NovoPacienteLogica" role="button" class="btn btn-primary">Novo Paciente</a>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
</div>
<!-- /.container-fluid -->
<footer class="navbar navbar-inverse navbar-fixed-bottom" style="background-color: #4682B4; border-color: #4682B4;">
<div class="container-fluid">
<p class="text-muted"><font color="#FFFFFF"> Odontologia</font></p>
</div>
</footer>
</body>
</html>
Página com tabela com 8 registros
Página da tabela com menos de 8 registros