I have a question, I have 3 tab-pane with datatable in each one of it. I add display nowrap to it so it doesn't overflow to the right and just fill the card body. But funny enough the display nowrap only working for the first tab-pane or the default active class. Here is my code
<div class="tab-content" style="width:100%">
<div class="tab-pane fade show active col-12" id="PAKJatuhTempo1-view" role="tabpanel" aria-labelledby="home-tab">
<div>
<div id="DivPAKJatuhTempo1">
<div class="row" style="padding-top:20px;">
<div class="col-12">
<div class="main-card mb-3">
<div class="card-body border rounded">
<table id="TablePakJatuhTempoSJT" class="display nowrap" style="width:100%">
<thead style="text-align:center">
<tr>
<th>No</th>
<th>Nama Pengelola RM</th>
<th>Nama Debitur</th>
<th>Maksimum Kredit</th>
<th>Tanggal Jatuh Tempo PAK Review</th>
<th>Sebab Keterlambatan PAK</th>
<th>Langkah-Langkah Yang Telah/Akan Dilaksanakan</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show col-12" id="PAKJatuhTempo2-view" role="tabpanel" aria-labelledby="home-tab">
<div>
<div id="DivPAKJatuhTempo2">
<div class="row" style="padding-top:20px;">
<div class="col-12">
<div class="main-card mb-3">
<div class="card-body border rounded">
<table id="TablePakJatuhTempoJTBI" class="display nowrap" style="width:100%">
<thead style="text-align:center">
<tr>
<th>No</th>
<th>Nama Pengelola RM</th>
<th>Nama Debitur</th>
<th>Maksimum Kredit</th>
<th>Tanggal Jatuh Tempo PAK Review</th>
<th>Sebab Keterlambatan PAK</th>
<th>Langkah-Langkah Yang Telah/Akan Dilaksanakan</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show col-12" id="PAKJatuhTempo3-view" role="tabpanel" aria-labelledby="home-tab">
<div>
<div id="DivPAKJatuhTempo3">
<div class="row" style="padding-top:20px;">
<div class="col-12">
<div class="main-card mb-3">
<div class="card-body border rounded">
<table id="TablePakJatuhTempoJTBD" class="display nowrap" style="width:100%">
<thead style="text-align:center">
<tr>
<th>No</th>
<th>Nama Pengelola RM</th>
<th>Nama Debitur</th>
<th>Maksimum Kredit</th>
<th>Tanggal Jatuh Tempo PAK Review</th>
<th>Sebab Keterlambatan PAK</th>
<th>Langkah-Langkah Yang Telah/Akan Dilaksanakan</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
any solution how to make all the tab-pane display working with the display nowrap?
Related
in my application, I use a lot the bootcard .card class.
Only, very often when I switch to mobile view, I notice a big overflow, which causes a display bug, and my whole page is found shifted.
Which means that I have to change the code in my .card class each time to make sure everything fits even in mobile view. It's very weird
On large screen :
On small screen :
This is the code :
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thanks for your help !
If it possible replace the table with columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<button class="btn btn-light btn-sm mb-1 float-sm-right">Ne pas résilier l'abonnement</button>
</h5>
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-4">
<h5>PRODUIT</h5>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<p class="text-secondary">
basic
</p>
</div>
<div class="col-12 col-sm-4">
<h5>PROCHAINE FACTURE</h5>
<p class="text-secondary">
Pas de prochaine facture
</p>
</div>
<div class="col-12 col-sm-4">
<h5>CRÉÉ LE</h5>
<p class="text-secondary">
03/04/2020
</p>
</div>
</div>
</div>
</div>
</div>
Add class table-responsive to the table:
body{ width: 360px; } /* Galaxy S */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless table-responsive">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have this code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">Employee Information</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row">First Name: </td>
<td>{{ $employee->first_name }}</td>
</tr>
<tr>
<td scope="row">Last Name: </td>
<td>{{ $employee->last_name }}</td>
</tr>
<tr>
<td scope="row">ID Number: </td>
<td>{{ $employee->id_number }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">External Training Records</div>
<div class="card-body">
External Training Records:
</div>
</div>
</div>
<div class="col-md-8 offset-md-4">
<div class="card">
<div class="card-header">Clients</div>
<div class="card-body">
Clients:
</div>
</div>
</div>
<div class="col-md-8 offset-md-4">
<div class="card">
<div class="card-header">Site</div>
<div class="card-body">
Sites
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/aq9Laaew/206869/
I would like the two sections on the right (external training and clients) to be underneath one another (when on a desktop). How does one do that in Bootstrap?
I know very little about front-end development. This is a learning curve for me.
To achieve that using Bootstrap layout utility classes, all you need is to place all your cards into one column, instead of adding a row for each card:
<div class="row">
<div class="col-lg-4">
... your left column card here...
</div>
<div class="col-lg-8">
... rest of your cards here...
</div>
</div>
Working example:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
}
.card {
margin-top: 15px;
}
.card + .card:last-child {
margin-bottom: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5">
<div class="card">
<div class="card-header">Employee Information</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row">First Name: </td>
<td>Jane</td>
</tr>
<tr>
<td scope="row">Last Name: </td>
<td>Doe</td>
</tr>
<tr>
<td scope="row">ID Number: </td>
<td>123456789123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7">
<div class="card">
<div class="card-header">External Training Records</div>
<div class="card-body">
External Training Records:
</div>
</div>
<div class="card">
<div class="card-header">Clients</div>
<div class="card-body">
Clients:
</div>
</div>
<div class="card">
<div class="card-header">Site</div>
<div class="card-body">
Sites
</div>
</div>
</div>
</div>
</div>
Please note your current question title doesn't relate too well to the actual problem. You're basically asking a layout utility question. Whatever you place in your layout has no relevance for solving/answering it.
I think this is what you want
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">Employee Information</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row">First Name: </td>
<td>Jane</td>
</tr>
<tr>
<td scope="row">Last Name: </td>
<td>Doe</td>
</tr>
<tr>
<td scope="row">ID Number: </td>
<td>123456789123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">External Training Records</div>
<div class="card-body">
External Training Records:
</div>
</div>
<div class="card">
<div class="card-header">Clients</div>
<div class="card-body">
Clients:
</div>
</div>
</div>
<div class="col-md-8 offset-md-4"></div>
<div class="col-md-8 offset-md-4">
<div class="card">
<div class="card-header">Site</div>
<div class="card-body">Sites</div>
</div>
</div>
</div>
</div>
I am trying to create a template that has two columns in a panel. I am using plainBootstrap v3.3.7. Below you can find what I tried:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Overview
</div>
<div class="panel-body">
</div>
<div class="container-fluid">
<div class="col-md-2">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-10">
<div class="tabbable" id="tabs-305570">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-495769" data-toggle="tab">Section 1
</a>
</li>
<li>
<a href="#panel-207616" data-toggle="tab">Section 2
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-495769">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-207616">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
However, my panel look like the following on my screen:
As you can see, in my panel the two columns inside overlap.
Any suggestions why my table and the section overlap so much?
I appreciate your replies!
Because you are wrapping a table which is by default not responsive with .col-md-2 which is a responsive class.
So you have to wrap it with .table-responsive ( a bootstrap class for making tables responsive ), check the updated snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Overview
</div>
<div class="panel-body">
</div>
<div class="container-fluid">
<div class="col-md-2">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-10">
<div class="tabbable" id="tabs-305570">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-495769" data-toggle="tab">Section 1
</a>
</li>
<li>
<a href="#panel-207616" data-toggle="tab">Section 2
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-495769">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-207616">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps :)
The problem is your columns, wrap both the table and the section in <div class="col-md-6">In the bootstrap grid system when you define <div class="col-md-12"></div>, This is a full grid (bootstrap maximum grid) so in order to get two equal columns out of this, you just define two columns with <div class="col-md-6"></div>. Reference
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Overview
</div>
<div class="panel-body">
</div>
<div class="container-fluid">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="tabbable" id="tabs-305570">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-495769" data-toggle="tab">
Section 1
</a>
</li>
<li>
<a href="#panel-207616" data-toggle="tab">
Section 2
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-495769">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-207616">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: Run the snippet as Full page
Currently I have col-sm-5 and col-sm-7 grid on the page which looks like this
<section class="site-content site-section">
<div class="container">
<div class="row">
<div class="col-sm-5 site-block">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-7 site-block">
<h3 class="site-heading">
<p><strong>test </strong></p>
</h3>
<p><hr></p>
<p><strong>test</strong></p>
<div class="row">
<div class="col-sm-4">
<h3>test1</h3>
<hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
</div>
<div class="col-sm-4">
<h3>test2</h3> <hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
</div>
<div class="col-sm-4">
<h3>test3</h3>
<hr>
<p><span class="glyphicon glyphicon-file"></span> test </p>
</div>
</div>
</div>
</div>
</div>
</section>
For better understanding what is producing this grid here is the JSFIDDLE So now I want to move both col-sm-4 on the right side of site-heading in `col-sm-7. It is not so clear what I want so here is the image of that:
Please check this and see if is what you need. I have changed the main grid to col-sm-4 and col-sm-8 then added some inside.
<section class="site-content site-section">
<div class="container">
<div class="row">
<div class="col-sm-4 site-block">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-8 site-block">
<div class="row">
<div class="col-sm-6">
<h3 class="site-heading">
<p><strong>test</strong></p></h3>
<p><hr></p>
<p><strong>test</strong></p>
</div>
<div class="col-sm-4">
<h3>test</h3>
<hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
<h3>test</h3> <hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3>test</h3>
<hr>
<div class="row">
<div class="col-md-3">
<div class="well">6</div>
</div>
<div class="col-md-3">
<div class="well">7</div>
</div>
<div class="col-md-3">
<div class="well">8</div>
</div>
<div class="col-md-3">
<div class="well">8</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
DEMO JSFIDDLE
I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.
Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.
table-layout is too complex in site. lots of nesting is there. For example:
<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
<td align='right'>
<table border="0" cellspacing="0">
<tr>
<td align='center' colspan='3'>
<span>Another tesing text</span>
<span style='color:#FFFFCC;'> - </span>
<span style='font-size:11px;color:#fffff;'>Random text</span>
</td>
</tr>
</table>
</td>
</tr>
For example how can I convert above code with bootstrap row, col-*-* grid-layout.
Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.
General suggestion on how to convert table base layout into bootstrap are also welcome.
Here is some great literature: Bootstrap 3 Grid system
Replace table and tbody with div class="container"
Replace tr with div class="row"
Replace td with div class="col-ww-nn"
Where ww is device width (xs, sm, md, lg)
Where nn is a number 1-12 for width percentage (divided by 12)
Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xs devices) your second main column would be a separate line. And you can make images responsive with img-response so that it's size changes with the device.
<div class="container" style="background-color:#ff00ff">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<img src="#" class="img-responsive">
</div>
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:10px;color:#cccccc;">Alpha testing</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<span>Another tesing text</span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="color:#ffffcc;"> - </span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:11px;color:#ffffff;">Random text</span>
</div>
</div>
</div>
</div>
</div>
Actually it is not so complex.
Just skip every <table> and <tbody> tag, treat every <tr> as block element with class="row" and every <td> as block element with class="col-*-*". Nesting Bootstrap grid is totally okey, so if you have somthing like that:
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
</tr>
Just do:
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<img border="0" src="#" width="100" height="300">
</div>
<div class="col-xs-10"> </div>
<div class="col-xs-2">
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</div>
</div>
</div>
</div>
Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)