Contents of twitter bootstrap tab are mixing - css

I'm still new in creating websites using twitter bootstrap. I was planning to have a tab that contains the assessment of a student but the contents of my tabs are mixing even though the id's are correct. For example, the contents of the payment history are seen in the other tabs although I am not missing any opening and closing tags. The values there are still dummy data. Here is the code:
<section id="main-content" " ng-controller="studCtrl">
<section class="wrapper">
<div class="content-panel">
<div class="row mt">
<div class="col-lg-12">
<h2>Student's Assessment</h2>
<ul class="nav nav-pills">
<li class="active">Distribution</li>
<li class="">Miscellaneous Fees</li>
<li class="">Other Fees</li>
<!--<li class="">Installment Fees</li-->
<li class="">Payment History</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="distribution">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div><!--table-responsive-->
</div>
<div class="tab-pane fade" id="misc-fees">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div><!--table-responsive-->
</div>
<div class="tab-pane fade" id="other-fees">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="payment-hist">
payment history
</div><!--payment history-->
</div><!-- end of tab content-->
</div><!--col-lg-12-->
</div> <!--row mt-->
</div><!--content-panel-->
</section><!--/wrapper -->
</section> <!--main-content-->

<section id="main-content" " ng-controller="studCtrl">
The code here has one more double quote sign. At first, you should remove the sign.
But in case still not works properly after removing the sign, than I suggest you may check DOM structure using dev tools in browser(chrome/firefox/...).

Related

datatable class="display nowrap" only working for active class

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?

Bootstrap 4 Card-Deck with Buttons inside, resizing

I caught a problem with a card-deck (3 cards) with bootstrap 4.
Everything looks great, but when you trie a landscape mode with your mobile, the buttons/links inside of each card are not resizing.
For sure, the link-titles are not the shortest, but it should work.
FIDDLE
<div class="container">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">
<div class="row">
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/bm.jpg" alt="Medizinischer Bademeister">
<div class="card-body">
<h5 class="card-title">Wijhg ilgu or!</h5>
<p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>
Mehr erfahren
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/pr.jpg" alt="Pharmareferent">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
<p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
Ausführliche Informationen
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/hfk.png" alt="Hygienefachkraft">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
<p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
Weiterführendes
</div>
</div>
</div>
<p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
</div>
</div>
</div>
Thank you so much!
As explained in this GitHub thread, text in Bootstrap btn does not wrap which is by-design.
There are 2 workarounds. Add CSS to make the btn text wrap...
.btn {
white-space: normal;
}
Or, use text-truncate and mw-100 on the buttons to show the "..." when the card width narrows...
Mehr erfahren
https://www.codeply.com/go/IdLNh5uUfA
So using your html but with BS 4 links it seems to be working fine, everything seem to be resizing as expected.
Running this snippet in full screen and using the dev tools of Chrome browser in responsive mode when I resize the deck everything resizes appropriately
Even though it looks to be an issue with button whitespace I can see that the 3rd column button still exceeds the card. Maybe consider using viewport font sizing.
.btn {
white-space:normal !important;
font-size:1vw !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container">
<h1>Aktuelles</h1>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-events-tab" data-toggle="pill" href="#pills-events" role="tab" aria-controls="pills-events" aria-selected="false">Veranstaltungen</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-press-tab" data-toggle="pill" href="#pills-press" role="tab" aria-controls="pills-press" aria-selected="false">Presse</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">
<div class="row">
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Medizinischer Bademeister">
<div class="card-body">
<h5 class="card-title">Wijhg ilgu or!</h5>
<p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>
Mehr erfahren
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Pharmareferent">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
<p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
Ausführliche Informationen
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Hygienefachkraft">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
<p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
Weiterführendes
</div>
</div>
</div>
<p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
</div>
</div>
<div class="tab-pane fade" id="pills-events" role="tabpanel" aria-labelledby="pills-events-tab">
<h3>Beginn der Ausbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Ausbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">01.08.2018</th>
<td>Phyrapie,<br>Pharmah-technischer Assistent,
<br>Masseur und med. Bademeister,<br>Med.-techn. Asssistent für den OP-Dienst,<br>Sozialbetreuer</td>
</tr>
<tr>
<th scope="row">01.09.2018</th>
<td>Altenpflege (auch verkürzt),<br>Altenpflegehilfe</td>
</tr>
</tbody>
</table>
<br>
<h3>Beginn der Fort- und Weiterbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Weiterbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">31.08.2018</th>
<td>Berufsbegleitende Weiterbildung als<br> "Fachkraft für Krajh,bkjl.b kjgöl uigiu <br>ein späterer Einstieg ist möglich!</td>
</tr>
<tr>
<th scope="row">09.2018</th>
<td>Berufbegleitende Weiterbildung als "Pharmareferent"<br>jhlkhgljk</td>
</tr>
</tbody>
</table>
<br>
<h3>Physiotherapeutische Weiterbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Kurstermin</th>
<th scope="col">Weiterbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">06.08. - 31.08.2018</th>
<td>Manuelle Lymphdrainage</td>
</tr>
<tr>
<th scope="row">10.09. - 16.09.2018</th>
<td>Wirbesäulenkurs für PT (W3)</td>
</tr>
<tr>
<th scope="row">09.11. - 11.11.2018</th>
<td>Einführungskurs "Osteopathie" (E0) für <br>Physiotherapeuten</td>
</tr>
<tr>
<th scope="row">12.11. - 18.11.2018</th>
<td>Extremitätenkurs für Ärzte und PT (E1+E2=Ä1)</td>
</tr>
<tr>
<th scope="row">07.12. - 09.12.2018</th>
<td>Kurs Extremitäten / Wirbelsäule E4/W4</td>
</tr>
</tbody>
</table>
<br>
</div>
<div class="tab-pane fade" id="pills-press" role="tabpanel" aria-labelledby="pills-press-tab">
<h3>Presseberichte</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Zeitung/Datum</th>
<th scope="col">Thema</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Pressebericht "Deutscher Sportball" / 08.11.2014</th>
<td>Auf zwei Rädern<br>Juniorenweltmeisterin Doreen Heinze...</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 02.06.2013</th>
<td>Mit Herzblut<br>Die Entscheidung für eine Ausbildung...</td>
</tr>
<tr>
<th scope="row">TLZ Erfurt / 28.10.2010</th>
<td>Projekttag im Bildungswerk für Gesundheitsberufe - Das Alter und kleine Kniffe</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 11.03.2009</th>
<td>Offene Türen - Bildungswerk für Gesundheitsberufe lädt am Samstag ein</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 05.07.2006</th>
<td>Neuer Beruf: Medizinsch-technischer Assistent für den OP-Dienst</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>

Create panel with two columns

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

Bootstrap: Firefox does not properly place tables above 767px width

I've created a simple web site with a Bootstrap navbar with tabs. Each tab shows a table. (See here.)
This works fine in Chrome 45 and IE 11 on Windows 8.1.
In Firefox however the tables are placed right to the navbar if the window width is greater than 767px.
<div id="content">
<ul class="nav nav-pills nav-tabs nav-justified navbar-header">
<li class="active"> Tab 1
</li>
<li> Tab 2
</li>
</ul>
<div>
<h1>test</h1>
<table class="table table-bordered table-striped table-responsive" id="azubiTable">
<thead>
<tr id="head">
<th>1st col</th>
<th>2nd col</th>
<th>3rd col</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
My best interpretation is that this is a float clearing issue not working correctly in FF.
If you add clear:both to the div that holds the table it works in FF.
Put nav and table inside col-*-12 like this
<div id="content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<nav>
<ul class="nav nav-pills nav-tabs nav-justified navbar-header">
<li class="active"> Tab 1
</li>
<li> Tab 2
</li>
</ul>
</nav>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<table class="table table-bordered table-striped table-responsive" id="azubiTable">
<thead>
<tr id="head">
<th>1st col</th>
<th>2nd col</th>
<th>3rd col</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Fiddle

Hide urls when printing a page

I have this webpage:
It looks like this when I try to print it:
It's missing the last item (user management) intentionally so that's not a problem.
But I'd like to hide the "(/campaigns)" and "(/profanity)" from the print.
Is that possible using CSS?
--EDIT--
This is the HTML:
<div class="row">
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Campaigns</div>
<a href="/campaigns" class="text-muted">
<i class="fa fa-bullhorn"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Campaigns active</th>
<td>1/1</td>
</tr>
<tr>
<th>Total posts</th>
<td>149</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Profanity</div>
<a href="/profanity" class="text-muted">
<i class="fa fa-filter"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Created profanity filters</th>
<td>0</td>
</tr>
<tr>
<th>Total words filtered</th>
<td>0</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">User management</div>
<a href="/account" class="text-muted">
<i class="fa fa-users"></i>
</a>
</div>
</div>
The #media tag supports print.
So if you want your blocks not to be displayed when in print, use the following code:
#media print {
.noprint {
display: none !important;
} }
Just add "noprint" to any element you want.
I recognize the classes, this is a bootstrap issue, as you will find in bootstrap.css this rule
#media print {
...
a[href]:after {
content: " (" attr(href) ")";
}
...
}
overwrite this rule and you should be golden, eg content:none;
add a class to your CSS called noprint for paper:
#media print {.noprint{display:none;}}
and then append that class to your code
eg:
<div class="comment noprint"> ... </div>

Resources