Trouble with Bootstrap 4 Grid system - html
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/
Related
How to show or hide a table when hitting enter or clicking on search button
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();
});
});
Place two fixed divs and the next content to scroll
I have three divs, where the first two have to be fixed and the third scroll. I'm doing it this way:
.topo2 {
position: fixed;
width: 95%;
z-index: 10;
top: auto;
bottom: auto;
}
.topo6 {
position: fixed;
width: 95%;
z-index: 10;
bottom: auto;
}
.acerto{
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
But the first two divs that have to be fixed are on top of each other.
I intend the second div to be after the first div and not on top of the other. I know that if you set the top property in the css and manually adjust it with it, but the first and second dives are not always the same height.
They can have two lines with having ten lines. How do I dynamically distinguish this so that the second div appears after the first without using the top property?
I've tried the bottom and margin-bottom properties but they don't work
Add a 'wrapper' element around the first two fixed divs, and set that one to fixed.
<div class="fixed-container">
<div class="topo2">...</div>
<div class="topo6">...</div>
</div>
.fixed-container{
position: fixed;
}
(function ($) {
$(function () {
$( window ).resize(function() {
setPadding();
});
setPadding();
function setPadding() {
let pad = ($('.fixed-container').height() + 10) + 'px';
$('.acerto').css('padding-top', pad);
}
});
})(jQuery);
.fixed-container{
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-container">
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
$(window).on('load resize', function(){
var fixedCon = $('.fixed-container').outerHeight();
$('.acerto').css('margin-top',fixedCon);
});
.fixed-container{
position: fixed;
width: 95%;
z-index: 10;
top: 0;
}
.acerto{
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-container">
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
First you need to store top div height in variable after then you can add top using stored value on window load and resize function so it will automatic set top position according to first div height. Please check demo.
How to reduce width of a form (CSS/HTML)
I have this html page:
<div class="panel panel-default">
<div class="panel-heading">
<h1>Usuarios</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | async">
<td>{{usuario.nome}}</td>
<td>{{usuario.telefone}}</td>
<td>{{usuario.email}}</td>
<td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
The width is following the navbar, so it's being stretched all the screen:
How can I reduce it to the center of the screen like a have a margin before and after the form?
I want it to be like this:
Looking at your screenshot I guess you are using Materialize CSS:
Try to the form code within below code:
<div class="container">
<div class="col s12">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Usuarios</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | async">
<td>{{usuario.nome}}</td>
<td>{{usuario.telefone}}</td>
<td>{{usuario.email}}</td>
<td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Just add this style code:
form {
max-width: 900px;
margin-left: auto;
margin-right: auto
}
unable to fix the issue when used bootstrap classes
I see two issues with my code. Header is not getting fixed and second issue is word wrap is not applicable for the headers/rows. I have used bootstrap classes, but still facing issues. I want to fix the table header and only rows should be scrollable and if the text is long it should automatically word wrap. I have multiple columns in my application(approximately 15 columns).Please advice. To view the sample code click here. Sample html code: <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body" id="modal-body"> <table id="myTable" class="table table-fixedheader table-bordered table-striped"> <thead> <tr class="row"> <th class="col-md-3">Header1</th> <th class="col-md-4">Header2Header2Header2Header2</th> <th class="col-md-3">Header3</th> <th class="col-md-4">Header4</th> </tr> </thead> <tbody> <tr class="row"> <td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td> <td class="col-md-4">33333</td> <td class="col-md-3">1111</td> <td class="col-md-4">5443545435354543</td> </tr> <tr class="row"> <td class="col-md-3">1111</td> <td class="col-md-4">33333</td> <td class="col-md-3">1111</td> <td class="col-md-4">5437665</td> </tr> <tr class="row"> <td class="col-md-3">1111</td> <td class="col-md-4">33333</td> <td class="col-md-3">1111</td> <td class="col-md-4">5435435443</td> </tr> <tr class="row"> <td class="col-md-3">1111</td> <td class="col-md-4">33333</td> <td class="col-md-3">1111</td> <td class="col-md-4">68678454</td> </tr> <tr class="row"> <td class="col-md-3">1111</td> <td class="col-md-4">786876</td> <td class="col-md-3">8787876</td> <td class="col-md-4">6765767</td> </tr> <tr class="row"> <td class="col-md-3">7656765</td> <td class="col-md-4">656456</td> <td class="col-md-3">116611</td> <td class="col-md-4">43434</td> </tr> <tr class="row"> <td class="col-md-3">43243432434324342</td> <td class="col-md-4">33344343233</td> <td class="col-md-3">1111</td> <td class="col-md-4">4343</td> </tr> <tr class="row"> <td class="col-md-3">1111</td> <td class="col-md-4">432434343243243</td> <td class="col-md-3">1111</td> <td class="col-md-4">432443</td> </tr> <tr class="row"> <td class="col-md-3">1111</td> <td class="col-md-4">333333</td> <td class="col-md-3">111312312123121</td> <td class="col-md-4">32112</td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
You could try a non table approach. If your ok with having set widths on the columns with content wrapping in the cells. Here's an example https://codepen.io/flurrd/pen/jmMNxK?editors=1100
Note: Class names are terrible in this example. I'd BEM it up for proper usage.
.table-body {
max-height: 200px;
overflow-y:auto;
}
.t-row {
display: flex;
border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
background: #e3e3e3;
}
.col {
word-wrap: break-word;
flex: 1 0 30%;
max-width: 33.3333%;
}
.cell {
padding: 8px;
}
<div class="table-wrap">
<div class="t-row t-header">
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
</div>
<div class="table-body">
<div class="t-row">
<div class="col">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="col">
<div class="cell">
1111
</div>
</div>
<div class="col">
<div class="cell">
11111111
</div>
</div>
</div>
</div>
</div>
White space below bootstrap 3 Modal
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