I have two tables in my html code and I would like to hide the table from my html page until I click enter in the search area or click on the search button. Once I click enter or hit enter on the search bar then I want my tables to appear. Right now I am unable to get it to work from the examples I have seen.
$(document).ready(function() {
//To hide the table
$("search-input").click(function() {
$("table1").hide("fast")
});
//To show the table
$("search-input").click(function() {
$("table1").show("2000")
});
//To hide the table
$("search-input").click(function() {
$("table2").hide("fast")
});
//To show the table
$("search-input").click(function() {
$("table2").show("2000")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Search Bar-->
<div class="mb-1">
<div class="container justify-content-left">
<div class="row">
<div class="col-lg-10">
<div class="input-group mb-4"><input type="text" id="search-input" class="form-control input-text" placeholder="Enter Target Property: Street Address, City/Town, State" aria-label="Recipient's Username" aria-describedby="basic-addon2">
<span id="clickable-search-span">
<div class="input-group-append"> <button class="btn btn-primary btn-lg" type="button"><i class="fa fa-search"></i></button> </div>
</span>
</div>
</div>
</div>
</div>
<div class="comm-area">
<div id="loader-area"> </div>
</div>
</div>
<!--Search Bar End-->
!--Report Table Start -->
<div class="mb-2">
<div class="results-section">
<div class="report-wrapper">
<div class="col-auto">
<table class="table table-sm table-striped table-light" id="table1">
<tbody>
<tr>
<th class="report-header" colspan="5" style="text-align: center;">Report</th>
</tr>
<tr>
<th> Address: </th>
<td id="proposed-address"> </td>
</tr>
<tr>
<th> Latitude: </th>
<td id="proposed-lat"> </td>
</tr>
<tr>
<th> Longitude: </th>
<td id="proposed-lng"> </td>
</tr>
<tr>
<th> Rank: </th>
<td id="proposed-rank"> </td>
</tr>
<tr>
<th> Description: </th>
<td id="proposed-description"> </td>
</tr>
<tr>
<th> NHDES OneStop Website: </th>
<td id="proposed-website"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--Report Table End -->
<!-- Generator Sites Start-->
<div class="container">
<div class="row justify-content-center">
<div class="generator-wrapper text-center">
<div class="generator-list">
<table id="generator-table">
<div class="table-responsive">
<table class="table table-light table-striped" id="table2">
<tr>
<th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
</tr>
<tr>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
<th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
<th> Generator Address </th>
<th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
</tr>
<tbody id="generator-body">
</tbody>
</table>
</div>
</table>
</div>
</div>
</div>
</div>
<!--Generator Sites Table End -->
Try this (pure JavaScript, no jQuery). You will also need to add an HTML ID to the button (Here it is searchbutton)
document.getElementById("table1").style.display = ''; // Show table
document.getElementById("search-input").onkeydown = function(event){ // Handle Textbox KeyDown Events
if (event.key == 'Enter'){ // If key is Enter.
document.getElementById("table1").style.display = 'none'; // Hide Table
}
}
document.getElementById("searchbutton").onclick = function(){ // On Button Click, show table.
document.getElementById("table1").style.display = 'none'; // Hide Table
}
If I understand correctly, that's what you wanted.
function showTables() {
$("#table1").prop('hidden', false);
$("#table2").prop('hidden', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Search Bar-->
<div class="mb-1">
<div class="container justify-content-left">
<div class="row">
<div class="col-lg-10">
<div class="input-group mb-4"><input type="text" id="search-input" class="form-control input-text" placeholder="Enter Target Property: Street Address, City/Town, State" aria-label="Recipient's Username" aria-describedby="basic-addon2">
<span id="clickable-search-span">
<div class="input-group-append"> <button class="btn btn-primary btn-lg" type="button" onclick="showTables()"><i class="fa fa-search"></i></button> </div>
</span>
</div>
</div>
</div>
</div>
<div class="comm-area">
<div id="loader-area"> </div>
</div>
</div>
<!--Search Bar End-->
!--Report Table Start -->
<div class="mb-2">
<div class="results-section">
<div class="report-wrapper">
<div class="col-auto">
<table class="table table-sm table-striped table-light" id="table1" hidden>
<tbody>
<tr>
<th class="report-header" colspan="5" style="text-align: center;">Report</th>
</tr>
<tr>
<th> Address: </th>
<td id="proposed-address"> </td>
</tr>
<tr>
<th> Latitude: </th>
<td id="proposed-lat"> </td>
</tr>
<tr>
<th> Longitude: </th>
<td id="proposed-lng"> </td>
</tr>
<tr>
<th> Rank: </th>
<td id="proposed-rank"> </td>
</tr>
<tr>
<th> Description: </th>
<td id="proposed-description"> </td>
</tr>
<tr>
<th> NHDES OneStop Website: </th>
<td id="proposed-website"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--Report Table End -->
<!-- Generator Sites Start-->
<div class="container">
<div class="row justify-content-center">
<div class="generator-wrapper text-center">
<div class="generator-list">
<table id="generator-table">
<div class="table-responsive">
<table class="table table-light table-striped" id="table2" hidden>
<tr>
<th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
</tr>
<tr>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
<th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
<th> Generator Address </th>
<th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
</tr>
<tbody id="generator-body">
</tbody>
</table>
</div>
</table>
</div>
</div>
</div>
</div>
<!--Generator Sites Table End -->
This code hides table1 onload.
When search-input is clicked, the view of table1 and table2 is toggled.
$(document).ready(function() {
$("#table1" ).hide();
$("#search-input").click(function () {
$("#table1" ).toggle();
$("#table2" ).toggle();
});
});
I am creating table that has long data in semantic ui, how to make the last column that contains action buttons remain visible (fixed position) while being scrolled? I have searched but not even satisfying solution.
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
<div class="ui segment" style="padding: 0px; overflow-x: scroll;"><table class="ui selectable single line compact table slide down visible transition"><thead class=""><tr class="left aligned"><th class="">Name</th><th class="">Type</th><th class="">Percent</th><th class="">Value</th><th class="">Max Value</th><th class="">Begin Date</th><th class="">Expired Date</th><th class="">Selected Product?</th><th class="">Priority</th><th class="">ezPay Available?</th><th class="">merchant Available?</th><th class="">All Merchant?</th><th class=""></th></tr></thead><tbody class=""><tr class="" style="background: rgb(255, 89, 0);"><td class="">fwfewfwe</td><td class="">Default Test</td><td class="">12</td><td class="">0</td><td class="">90000</td><td class="">2019/10/26 15:05</td><td class="">2019/10/26 15:05</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr><tr class="" style="background: rgb(255, 89, 0);"><td class="">123</td><td class="">Default Test</td><td class="">0</td><td class="">69000</td><td class="">0</td><td class="">2019/10/20 14:43</td><td class="">2019/10/21 14:43</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr><tr class="" style="background: rgb(255, 89, 0);"><td class="">grgrb egeh</td><td class="">Default Pulsa Rule Cashback</td><td class="">0</td><td class="">43545345</td><td class="">0</td><td class="">2019/10/20 14:45</td><td class="">2019/10/30 14:45</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr></tbody></table></div>
Here is my code
like this?
I have just added position:sticky; and right:0;, top:0; to the ::last-child of td.
.ui.table tr td:last-child {
position: sticky;
right: 0;
top: 0;
background: #333;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui segment" style="padding: 0px; overflow-x: scroll;">
<table class="ui selectable single line compact table slide down visible transition">
<thead class="">
<tr class="left aligned">
<th class="">Name</th>
<th class="">Type</th>
<th class="">Percent</th>
<th class="">Value</th>
<th class="">Max Value</th>
<th class="">Begin Date</th>
<th class="">Expired Date</th>
<th class="">Selected Product?</th>
<th class="">Priority</th>
<th class="">ezPay Available?</th>
<th class="">merchant Available?</th>
<th class="">All Merchant?</th>
<th class=""></th>
</tr>
</thead>
<tbody class="">
<tr class="" style="background: rgb(255, 89, 0);">
<td class="">fwfewfwe</td>
<td class="">Default Test</td>
<td class="">12</td>
<td class="">0</td>
<td class="">90000</td>
<td class="">2019/10/26 15:05</td>
<td class="">2019/10/26 15:05</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">1</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">
<div class="ui buttons">
<button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
<button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
</div>
</td>
</tr>
<tr class="" style="background: rgb(255, 89, 0);">
<td class="">123</td>
<td class="">Default Test</td>
<td class="">0</td>
<td class="">69000</td>
<td class="">0</td>
<td class="">2019/10/20 14:43</td>
<td class="">2019/10/21 14:43</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">1</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">
<div class="ui buttons">
<button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
<button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
</div>
</td>
</tr>
<tr class="" style="background: rgb(255, 89, 0);">
<td class="">grgrb egeh</td>
<td class="">Default Pulsa Rule Cashback</td>
<td class="">0</td>
<td class="">43545345</td>
<td class="">0</td>
<td class="">2019/10/20 14:45</td>
<td class="">2019/10/30 14:45</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">1</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">
<div class="ui buttons">
<button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
<button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
With the new Bootstrap 4 it's not possible anymore to simply apply classes like col-md-2 to the or the tags of a table.
So the solution seems to use class="d-flex" in the parent :
<tr class="d-flex">
but when I do it my whole table don't fit anymore in the parent div. And I can not do anything against it.
Can somebody help me to get the clue?
Here is the code of the table:
<div class="card-body">
<h3 class="col-12 mt-2">Lehrer</h3>
<table class="table table-light">
<tbody>
<tr class="d-flex">
<td class="col-md-1">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
<tr class="d-flex">
<td class="col-md-1">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-4"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
If you want the table cells to fill the width, use 12 columns units...
<tr class="row mx-0">
<td class="col-md-2">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-6"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
Or, use ml-auto to push the columns to the right..
<tr class="row mx-0">
<td class="col-md-2">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1 ml-auto">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
https://www.codeply.com/go/xRodoKUKBf
I'm new to Bootstrap and I've been struggling with a grid for over 3 hours now. I've read many other posts here on Stackoverflow, tried everything, but I'm doing something wrong and I can't figure it out. Please don't tag my post as repeated, since I have read all other posts and I can't find a solution.
I'm designing a dashboard, and everything was fine until I reached my second row and now I'm stuck. This is what I want to achieve (the pink boxes are the ones I can't get right).
This is what I want to achieve (the pink boxes are the ones I can't get right. They fall to a new row.)
Here is my code:
/* Body */
body {
margin-top: 54px;
}
/* Top Navbar */
.navbar li {
font-size: 12px;
}
/* Sidebar */
.sidebar {
background-color: #F8F9FA;
padding-right: 18px;
}
/* Sidebar Table */
.sidebar-table {
font-size: 10px;
overflow: scroll;
}
/* Main Frame */
.main-frame,
.nueva-orden-frame,
.volumen-transado-frame {
border: 1px solid #DEE2E6;
background-color: #fff;
margin-top: 2px;
padding: 0;
color: #212529;
height: 55%;
}
.main-frame-header,
.nueva-orden-frame-header,
.volumen-transado-frame-header {
width: 100%;
margin: 0 auto;
background-color: #edeef0;
padding: 7px 16px 0px 16px;
}
.btn-group-bg {
background-color: #edeef0;
padding-top: 7px;
border-top: 1px solid #DEE2E6;
margin-top: 2px;
}
.btn-group-order-book {
width: 90%;
}
.btn-order-book {
width: 100%;
}
.section-title {
display: inline-block;
font-size: 16px;
vertical-align: middle;
}
.btn-comprar,
.btn-vender {
padding-left: 70px;
padding-right: 70px;
background-color: #fff;
border-color: #007bff;
color: #007bff;
}
.main-frame-right-info {
font-size: 13px;
color: #212529;
}
.card-size {
height: 168px;
}
/* Nueva Orden Frame */
.nueva-orden-frame {
height: 294px;
border-left: none;
}
.historial-ordenes-table {
font-size: 10px;
}
/* Volumen Transado Frame */
.sub-header-compra-venta {
font-size: 11px;
font-weight: bold;
background-color: #b9baba;
height: 294px;
}
.nueva-orden-frame {
border-left: none;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<title>Avesta Wallet</title>
</head>
<body>
<!-- Top Navbar -->
<nav class="navbar navbar-expand navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">AVESTA</a>
<ul class="navbar-nav mr-auto">
<!-- BTC Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BTC/CLP CLP$4.049.997 24h<i class="fas fa-angle-down"></i> 4.3%
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Information here</a>
</div>
</li>
<!-- Saldo Disponible Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Saldo Disponible ฿0,000000 $0
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Information here</a>
</div>
</li>
<!-- User Logout -->
<li class="nav-item">
<a class="nav-link" href="#">
Logout <i class="fas fa-sign-out-alt"></i>
</a>
</li>
</ul>
</nav>
<!-- Sidebar -->
<div class="row" style="border: 3px solid red;">
<div class="col-lg-3 col-md-3 col-sm-12 pr-0 text-center sidebar">
<div class="btn-group-bg">
<div class="btn-group btn-group-sm text-right pb-2 btn-group-order-book" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary btn-order-book">Order Book</button>
<button type="button" class="btn btn-primary pr-3 pl-3">Transaction History</button>
</div>
</div>
<!-- TABLE WITH INFORMATION STARTS HERE -->
<table class="table table-sm table-fixed sidebar-table">
<thead>
<tr>
<th scope="col">Cantidad</th>
<th scope="col">Precio</th>
<th scope="col">Acumulado</th>
</tr>
</thead>
<tbody>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
<tr>
<td>฿0,080616</td>
<td>$4.086.469</td>
<td>฿3,955796</td>
</tr>
</tbody>
</table>
<!-- /TABLE WITH INFORMATION ENDS HERE -->
</div>
<!-- "Nueva Orden Frame" -->
<div class="col-lg-4 col-md-4 col-sm-12 main-frame">
<div class="main-frame-header">
<div class="d-inline-block">
<p class="section-title">Nueva Orden</p>
</div>
<div class="float-right">
<div class="btn-group btn-group-sm text-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Límite</button>
<button type="button" class="btn btn-primary">Mercado</button>
</div>
</div>
</div>
<div>
<div class="text-center mt-2">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary btn-block btn-comprar">Comprar</button>
<button type="button" class="btn btn-primary btn-vender">Vender</button>
</div>
</div>
<div class="main-frame-input col-lg-12 pb-3">
<!-- Form -->
<form class="col-lg-6 d-inline-block">
<div class="form-group mt-2 mb-1">
<label class="small" for="formGroupExampleInput">Cantidad</label>
<input type="text" class="form-control form-control-sm" id="formGroupExampleInput" placeholder="AVE">
</div>
<div class="form-group mt-0">
<label class="small" for="formGroupExampleInput2">Precio</label>
<input type="text" class="form-control form-control-sm" id="formGroupExampleInput2" placeholder="CLP">
</div>
<div>
<button type="button" class="btn btn-success btn-sm btn-block">Vender</button>
</div>
</form>
<!-- /Form-->
<div class="main-frame-right-info col-lg-6 d-inline-block float-right mt-3">
<div class="card card-size">
<div class="card-body">Bitcoin a gastar <br /> ฿0,000000 <br /> Pesos a recibir <br /> - <br /> Tarifa de 0.0 % aplicada
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Nueva Orden Frame -->
<!-- Mis Órdenes Frame -->
<div class="col-lg-5 col-md-5 col-sm-12 nueva-orden-frame">
<div class="nueva-orden-frame-header">
<div class="d-inline-block">
<p class="section-title">Mis Órdenes</p>
</div>
<div class="float-right">
<div class="btn-group btn-group-sm text-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Historial</button>
</div>
</div>
</div>
<div>
<div class="text-center mt-2">
<!-- Aquí se coloca la Datatable -->
<table class="table table-sm historial-ordenes-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item</th>
<th scope="col">Item</th>
<th scope="col">Item</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row d-flex p-2 justify-content-start">
<div class="col-lg-12 col-md-12" style="border: 1px solid blue;">
<div class="col-lg-6 col-md-6" style="border: 1px solid red;">Column with 6</div>
</div>
</div>
</div>
<!-- /Mis Órdenes Frame -->
<!-- VOLUMEN TRANSADO STARTS HERE -->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Thanks and please remember I'm new to BS4, so please don't tag my post :)
Here is an example of how to setup your bootstap html tags to get the layout.
<body>
<div class="container">
<div class="row">
<div class="col-12 gray">Top Navigation</div>
</div>
<div class="row">
<div class="col-3 gray">
Side Table
</div>
<div class="col-9 gray">
<div class="row">
<div class="col-5 gray">Box 1</div>
<div class="col-7 gray">Box 2</div>
</div>
<div class="row">
<div class="col-9 pink">Box 3</div>
<div class="col-3 pink">Box 4</div>
</div>
</div>
</div>
</div>
</body>
Plunk here: https://embed.plnkr.co/pP7QiafQzg0vdIa2eTu6/
What is this white space(marked as what in above image) below the modal-footer? Tried inspecting the element but chrome doesn't show anything. Want to remove this white space. I'm using Bootstrap 3.
website: Link
Html:
<link rel="stylesheet" href="/static/css/bootstrap_3.2.css">
<div id="shoppingModal2" class="modal in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-left: 30%; overflow-x: hidden; margin-top: 3%; display: block;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Your Shopping Cart</h3>
</div>
<div class="modal-body shopping_cart_body">
<table class="table table-hover" id="shopping_table">
<thead>
<tr><td class="active">Product Image</td>
<td class="active">Id</td>
<td class="active">Size</td>
<td class="active">Price</td>
<td class="active"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;"></td>
<td class="active">2577</td>
<td class="active"><strong> 8.00in x 10.00in </strong></td>
<td class="active"> $
<span class="price_row"> 15.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;"></td>
<td class="active">2585</td>
<td class="active"><strong> 27.00in x 21.00in </strong></td>
<td class="active">
<span class="price_currency">Rs. </span>
<span class="price_row"> 4500.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;"></td>
<td class="active">2586</td>
<td class="active"><strong> 21.00in x 21.00in </strong></td>
<td class="active">
<span class="price_currency">Rs. </span>
<span class="price_row"> 5000.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<span class="pull-left"> Total Price: </span> <span class="pull-left" id="total_price">Rs. 10430</span>
<button class="btn btn-primary">Proceed to Buy <i class="icon-chevron-right icon-white"></i> </button>
</div>
</div>
I think you've got something wrong with the modal script or structure. Try to re-arrange everything from the start again!
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shoppingModal2">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="shoppingModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Your Shopping Cart</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="shopping_table">
<thead>
<tr>
<td class="active">Product Image</td>
<td class="active">Id</td>
<td class="active">Size</td>
<td class="active">Price</td>
<td class="active"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;">
</td>
<td class="active">2577</td>
<td class="active"><strong> 8.00in x 10.00in </strong>
</td>
<td class="active">$ <span class="price_row"> 15.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;">
</td>
<td class="active">2585</td>
<td class="active"><strong> 27.00in x 21.00in </strong>
</td>
<td class="active"> <span class="price_currency">Rs. </span>
<span class="price_row"> 4500.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;">
</td>
<td class="active">2586</td>
<td class="active"><strong> 21.00in x 21.00in </strong>
</td>
<td class="active"> <span class="price_currency">Rs. </span>
<span class="price_row"> 5000.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Proceed to buy <i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
</div>
</div>
Here is a DEMO