I have a table inside a div that shows some important information about the elements inside the div and I want this table to follow the scroll as long as the div.
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12 col-lg-19 ">
<div class="table-responsive">
<table>
<tr style="white-space:nowrap;">
<th class="fill"><h2>Meritos</h2></th>
<th scope="row" style="white-space:nowrap;">
<h2>Auto Puntuación</h2>
<input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
</th>
<th></th>
<th scope="row" style="white-space:nowrap;">
<h2>Puntuación Evaluación</h2>
<input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
</th>
</tr>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
{code .....}
</div>
</div>
</div>
</div>
I have tried everything that I found about making an element follow the scroll with Javascript/jQuery with no result.
I´m working with Bootstrap v3.3 and Cakephp v3.5.
Thanks a lot in advance.
Use position: fixed;
See code below:
.panel-body{
height: 150px;
overflow-y: scroll;
padding:0!important;
}
.table-responsive{
position: fixed;
width:90%!important;
}
.list-group{
height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
</div>
</div>
</div>
</div>
Related
I want to create a scroll bar between the sidebar and the table both are in different container I tried to implement it but only the table container is displaying with the scroll and sidebar is hidden.
In side bar there would around six rows and table container which have around around 24 columns.
html,
body {
height: 100%;
}
header,
footer {
background: #ccc;
height: 20%;
}
#main {
height: 60%;
overflow-y: scroll;
}
.container{
position:relative;
}
.sidebar{
width:30%;
background-color:lightblue;
height: 1000px;;
float:left;
margin-left: -625px;
flex: 50%;
}
<body>
<div class="container" id="main">
<div class="sidebar">
<div class="row">
<div class="row" id="row_id">
"side bar content"
</div>
</div>
</div>
</div>
<div class='container-l'>
<div id='container-table'>
<table class="table">
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
I'm not sure if I did understand the question, but you can try using columns too, or wrap the containers in a display flex div
.wrapper{
display: flex;
}
<body>
<div class="wrapper">
<!-- your code here -->
<div class="container" id="main">
<div class="sidebar">
<div class="row">
<div class="row" id="row_id">
"side bar content"
</div>
</div>
</div>
</div>
<div class='container-l'>
<div id='container-table'>
<table class="table">
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
I am trying to enable a pop-up window with information on the clicked table element.
Therefore I wanna get the element ID of the clicked element. Thanks :D
Problem
I always get the same ID//table element no matter which table entry I click.
HTML Page with a table which displays data from the database
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID()'>
<td id='ID'>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(){
var id = (this).document.getElementById('ID');
console.log(id);
}
</script>
{%endblock main%}
Picture of HTML Page with Table
Picture of console log output
in the HTML DOM u can't have more than 1 item with the same id, for all of your td tags the id is ID, so if u change the <td id="ID"> with <td id={{book.id}}> , each td must have the correct id.
You are getting ID 1 all the time because when you do getElementByID("ID") the DOM returns the first element it finds with that ID, since there should be no more.
Like mentioned above the issue was the rather silly mistake that the requested ID in getElementById('ID') was always the same.
This know works like it should:
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID("{{book.id}}")'>
<td id="{{book.id}}">{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(id){
var book_id = document.getElementById(id);
console.log(book_id);
}
</script>
{%endblock main%}
Output console
I want to press enter on the 'Buscar' input and focus on the first input ( 'Qtd on the table').
I tried
$(this).nextAll('input').first().focus();
$(this).next('input:text').focus();
And a lot of solutions and other codes I found here and online but nothing worked. I didn't get any errors on the console which makes it harder to find out what I'm missing.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
First, you shouldn't be setting numerical ids. Second, buscar has no siblings so you can't say nextAll because they aren't any siblings.
What you can do is watch the input for an enter key up and focus on the first input with the name quantidade. See the first function below.
$('#busca').on('keyup', function(e){
if(e.which === 13){
$('input[name="quantidade"]').first().focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
// get all the inputs that are not disabled and not hidden
var $allInputs = $(':input:not(:disabled):not(:hidden)');
$('#busca').on('keyup', function(e){
// if enter was pressed
if ((e.keyCode || e.which) === 13) {
// cancel any form submit that might happen
e.preventDefault();
// focus on the input that is the next index after the index that busca has
$allInputs.eq( $allInputs.index(this) + 1 ).focus();
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
I am new to Bootstrap and Html. I am currently trying to separate my Add Person button away from the panel body but I do not know how to achieve that. Below is the screenshot of my problem and my current codes:
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use clearfix div as sugggested below. And add margin-top: 10px; on the panel-body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="panel panel-primary">
<div class="panel-heading ">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right" style="float: right;">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="clearfix"></div>
<div class="panel-body" style="margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" style="margin-bottom:5px" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
you can use margin-bottom.
This would be my way to fix this:
Give your button an id and add bottom margin within your css:
#yourButtonId{ margin-bottom: 10px; }
OR
Put your Button in a new bootstrap row: <div class="row"> ---Your button code--- </div>
I am using bootstrap modal.
In view,
<div id="basic" class="well modal fade" style="max-width:44em;">
<div class="model-header">Send Push</div>
<div class="model-body">
<div class="top">
<p>You are sending text push notifications to all devices.</p>
</div>
<div class="left" style="width: 100%;height: 100px;float: left;">
<table style="margin-top: 10px;width: 100%">
<tr>
<th>Device Type</th>
<th>Device Count</th>
<th>Remaining</th>
</tr>
<tr id="row1">
<td>IOS</td>
<td></td>
<td>0</td>
</tr>
<tr id="row2">
<td>Android</td>
<td></td>
<td>0</td>
</tr>
</table>
</div>
<div class="right" style="width: 100%;height: 250px;float: left;">
<div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">
</div>
<div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
</div>
</div>
</div>
Script for showing modal,
$('#notificationform').ajaxForm({
beforeSubmit: validate,
beforeSend: function () {
$('#spinner1').html('Initializing');
$('.modal-header').html('Initializing');
$('.top,.left').hide();
$('#basic').popup('show');
showLoader();
},
complete: function (xhr) {
var response = xhr.responseText;
var status = xhr.status;
if (status == '200') {
var res = response.split("<!DOCTYPE html>");
var obj = $.parseJSON(res[0]);
Out side this ajaxform function the modal is showing, But i want to show modal in beforesend function.
But this code is not working.I want to show pop up, but it is not displaying anything. Please help me. How to solve this.
Use Proper Library and latest library for modal...
See the snippest..
$("#myBtn").click(function(){
$("#basic").modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<div id="basic" class="well modal fade" style="max-width:44em;">
<div class="model-header">Send Push</div>
<div class="model-body">
<div class="top">
<p>You are sending text push notifications to all devices. </p>
</div>
<div class="left" style="width: 100%;height: 100px;float: left;">
<table style="margin-top: 10px;width: 100%">
<tr>
<th>Device Type</th>
<th>Device Count</th>
<th>Remaining</th>
</tr>
<tr id="row1">
<td>IOS</td>
<td></td>
<td>0</td>
</tr>
<tr id="row2">
<td>Android</td>
<td></td>
<td>0</td>
</tr>
</table>
</div>
<div class="right" style="width: 100%;height: 250px;float: left;">
<div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">
</div>
<div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
</div>
</div>
</div>