I am using default bootstrap tooltip in my table header. It shows irrelevant behavior, like- it increases the width of the header.
here is the codepen link
https://codepen.io/tumulalmamun/pen/mpQzBV
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<div class="row">
<div class="col-lg-3">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr><th colspan="2"> status (Overall)</th></tr>
<tr>
<th colspan="2" data-toggle="tooltip" data-placement="right" title="Hooray!">
Pending
</th>
</tr>
<tr>
<th data-toggle="tooltip" data-placement="right" title="Hooray!">M</th>
<th data-toggle="tooltip" data-placement="right" title="Hooray!">O</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
</div>
</div>
</body>
</html>
The fix is to add the tool-tip to an element inside of th/td instead of directly on it. (I have added divs around the text you see in your example)
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="5">Pre-Recruitment status (Overall)</th>
</tr>
<tr>
<th rowspan="2" colspan="2">Status </th>
<th rowspan="2">Candidate</th>
<th colspan="2">
<div data-toggle="tooltip" data-placement="right" title="Hooray!">Panding Doc.</div>
</th>
</tr>
<tr>
<th>
<div data-toggle="tooltip" data-placement="right" title="Hooray!">M</div>
</th>
<th>
<div data-toggle="tooltip" data-placement="right" title="Hooray!">O</div>
</th>
</tr>
</thead>
</table>
When a tool-tip is displayed it adds a new div to the markup directly after the element with the data-toggle="tooltip" attribute on it (Inspect using dev tools to see this happening). Therefore it will break your table layout because a tool-tip will be placed after the table element. If it is done inside a table element the layout will not be affected.
I have forked your codepen with the solution.
Related
This question already has answers here:
Centering text in a table in Twitter Bootstrap
(10 answers)
Closed 10 months ago.
In this table how can I align the text in center? text-center is not working.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td class="text-center">name</td>
<td class="text-center">supplier </td>
<td class="text-center"><button>Delete</button> </td>
</tr>
</tbody>
</table>
You can use the classname text-center.
<div class="text-center">
I am centered
</div>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<table class="table table-striped">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
Or in CSS put this in the parent container
display: flex;
align-items: center;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody align="center">
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
add align="center" to the tbody
use css classes, go checkout centertag - w3schools
.class{text-align:center;}
<tbody>
<tr>
<td class="center">name</td>
<td class="center">supplier </td>
<td><button class="center">Delete</button> </td>
</tr>
</tbody>`
Hello I have tried to make a table that has expenses, amount kai action but I have a problem with the alignment. I tried to correct it through the width but unfortunately it did not work.
What am I doing wrong?
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<a routerLink="/addexpense">Add Expense</a>
<div class="div1">
<label for="keyword">Search:</label>
<input type="text"
id="keyword"
[(ngModel)]="filters.keyword"
name="keyword"
(input)="listExpenses()">
</div>
<div class = "container">
<table class = "table table-striped table-bordered" >
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<div *ngFor ="let expense of expenses">
<tr>
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink ="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</div>
</table>
</div>
</body>
result :
Not to bind *ngFor to <div> element.
Instead, you need to bind *ngFor to <tr> element and remove <div> element from the <table>.
<table class="table table-striped table-bordered">
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<tr *ngFor="let expense of expenses">
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</table>
Sample Solution on StackBlitz
I have bootstrap table that looks like this:
As you can see the first column's text doesn't fit. How can I make first column text fit the column ?
Here's the code:
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover table-checkable order-column" id="matches_table">
<tbody>
{% for field, value in object.items %}
<tr class="odd gradeX">
<td width=""><b>{{ field|field_name_split|title }}</b></td>
<td width="">{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
Your code, don't have the . Below I have added a sample table bootstrap code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
<table class="table table-striped table-bordered table-hover table-checkable order-column">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Thanks,
I have a Bootstrap table that allows users to select rows which adds the class="success" to the select Row. I'm using the defaults for the contextual classes:
https://getbootstrap.com/docs/3.3/css/#tables-contextual-classes
but the customer would like, just for this particular page, to have the success be a more brighter green that stands out more.
Here's an example of the table:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Serial #</th>
<th scope="col">Product Code</th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="success" id="PZs456">
<td>ZK2342MFM</td>
<td>JMPG</td>
<td>98651217</td>
<td>Keyboard - Bluetooth</td>
<td class="text-center">
<button type="button" class="btn btn-success btn-sm">Select</button>
</td>
</tr>
</tbody>
</table>
What's the best way to change the 'success' colour so it's a brighter green just for this page without changing the Bootstrap CSS itself?
.new-green {
background: #00ff00 !important;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Serial #</th>
<th scope="col">Product Code</th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="success" id="PZs456">
<td>ZK2342MFM</td>
<td>JMPG</td>
<td>98651217</td>
<td>Keyboard - Bluetooth</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm new-green">Select</button></td>
</tr>
</tbody>
</table>
I do not know if this is a best way but since there are a lot of !important things in bootstrap why dont you use your own as new class?
This should be simple. I just want to display the font-awesome remove font, and the font awesome fa-camera-retro font. What on earth am I doing wrong. I made sure I am using the right class; I examined the website and just simply downloaded the CDN.
Copy this file to your hard drive and call it Index.html;
Examine this through ANY browser; It will not work. Somehow it works on Fiddle! WTF?
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test </title>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script> </script>
</head>
<body>
WHY DOESNT THIS WORK = Remove It - <i class="fa fa-remove"></i>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-hover">
<thead>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Remove </th>
<th> Icon 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Element 1 </td>
<td> Element 2 </td>
<td>WHY DOESNT THIS WORK = <i class="fa fa-camera-retro"></i></td>
<td><i class="fa fa-times"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Add https: (6th line)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test </title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script> </script>
</head>
<body>
WHY DOESNT THIS WORK = Remove It - <i class="fa fa-remove"></i>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-hover">
<thead>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Remove </th>
<th> Icon 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Element 1 </td>
<td> Element 2 </td>
<td>WHY DOESNT THIS WORK = <i class="fa fa-camera-retro"></i></td>
<td><i class="fa fa-times"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>