Table in Bootstrap hiding buttons

Question

Table in Bootstrap hiding buttons

Navigation

#1 by (0 votes)

1

I'm doing a small Java Web application with Bootstrap, but I'm having 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 scrolling or the scrolling of the table itself. I do not know how to make the page roll appear. Here is the code, filling it is through Java, but I'll insert some lines as hardcode for visualization effect, which is my problem.

PS: I am 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 I do not use local file links. So I'm going to 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><!--LatestcompiledJavaScript--><scriptsrc="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>

Code with hardcodes 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><!--LatestcompiledJavaScript--><scriptsrc="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

Tablepagewithlessthan8records

javascript html5 css3 bootstrap-3

asked by anonymous 24.01.2018 / 19:02

1 answer

List of all files that are inside the Resource.Raw folder Spinner - List line break

score 0 · Accepted Answer

Lucas does not know if this solution suits you because I do not know how the system should work for a good experience. But I've got a solution for you.

Option 1

With this option you can leave the fixed BTNs just above footer , even there are only two lines in the table the BTNs would continue at the bottom of the screen. For this I did as follows. (which I still do not find ideal, but for some reason when your table is not accepting overflow nor height below has an image about it)

CSS in the Table with a margin-bottom:120px; discounting the height of BTNs and Footer and a <div class="container"> with BTNs just above 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 images: (with few and many results in the table)

ExampleImadedirectontheBootstrapsite.Butyourtabledidnotacceptthosestyles...(noticeredboxes)

Option2

IputtheBTNsinsideadivandputa"margin-bottom: 80px" greater than the height of Footer 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>

The Snippet is not working but follows an img. Test there! (notice BTNs and Scroll right).