Table in Bootstrap hiding buttons

Asked

Viewed 1,121 times

1

I am making a small Java Web application with Bootstrap, but I have an error on a page where I use a table. When I have more than eight rows in the table, the buttons that are below the table disappear, I thought the page would activate the page bearing or the table bearing itself. I don’t know how to make the page bearing appear. It follows below the code, the filling it is through Java, but I will insert some lines as hardcode for visualization effect, which is my problem.

PS: I’m not getting the code to use Boostrap here on the Stackoverflow page, which I find strange, since in the code I refer to online styling links and do not use links from local files. So I’ll put the execution image on my machine too.

Original Code

<!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>

Hardcode code for visibility issues

<!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>

Page with table with 8 records

Página da tabela com 8 registros

Table page with less than 8 records

Página da tabela com menos de 8 registros

javascript html5 css3 bootstrap-3

1 answer

0


Lucas I don’t know if this solution suits you because I don’t know how the system should work for a good experience. But I got a solution for you.

Option 1

With this option you can leave the fixed Btns just above the footer, right there only have two rows in the table the Btns would continue at the bottom of the screen. For that I did as follows. (which I still don’t think ideal, but for some reason when your table isn’t accepting overflow or height below has an image on it)

CSS in Table with a margin-bottom:120px; discounting the height of Btns and Footer and a <div class="container"> with the Btns just above the footer

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 120px;
}

<div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="navbar navbar-fixed-bottom" style="padding: 10px 0 60px 21px; background-color: #fff;">
                    <button type="button" class="btn btn-primary">Novo Procedimento</button>
                    <a href="mvc?logica=NovoPacienteLogica" role="button" class="btn btn-primary">Novo Paciente</a>
                </div>
            </div>
        </div>
    </div>
<footer ....

Result in the images: (with few and many results in the table) inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Example I did right on the Bootstrap site. However your table did not accept these styles... (Notice the red boxes) inserir a descrição da imagem aqui

Option 2

I put the Btns inside a div and put in her a "margin-bottom: 80px" bigger than Footer’s height and it worked.

<div style="margin-bottom: 80px">
    <button type="button" class="btn btn-primary">Novo Procedimento</button>
    <a href="mvc?logica=NovoPacienteLogica" role="button" class="btn btn-primary">Novo Paciente</a>
</div>

Snippet is not working but follows an img. Test there! (Note the Btns and the Scroll on the right.)

inserir a descrição da imagem aqui

  • Yes, Hugo does. But if I wanted to keep the buttons fixed? With the bar just rolling the table, how would I?

  • @Lucasferreira I believe that can do yes. You would have a problem if they were just above the footer fixed, even if you only had two results in the table for example?

  • There would be no problem.

  • @Lucasferreira edited the answer and put in Option 1 the proposal of the Btns always at the end of the page, has some details in this option, but for now can serve you. A Option 2 is with the Btns at the end of the Scroll.

Browser other questions tagged javascript html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.