css Autosize table header with glyphicon - html

Is it possible to autosize a column by its header size which includes a glyphicon right aligned?
E.g.:
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
And the style:
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
Pushes the glyphicon to the second column.
Full code:
<!doctype html>
<html>
<head>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="table table-bordered" style="width: 1px;">
<thead>
<tr>
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
</tr>
</thead>
</table>
</body>
</html>

Gee always the way you spend hours changing css to see what works and by posting here I had the light turned on, all I had to do is remove the pull-right class out of the glyphicon

Related

How to vertically center table cell in Bootstrap?

I have a bootstrap table that contains a form-inline in a certain column. And this caused the contents in other columns not vertically center aligned. (As seen in the 1st code snippet) How to avoid this situation?
Actually, if I remove that form-inline from the table, everything works fine. (As seen in the 2nd code snippet) So I guess the problem comes from the form-inline embedded into the table.
/* Fit the table cell width to the contents */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol</th>
<th style="width: 0.01%">Share</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td style="width: 0.01%">1</td>
<td>
<form class="form-inline justify-content-center">
<button type="submit" class="btn btn-danger" name="TSLA" value="Sell">
<i class="fas fa-minus-circle"></i>
</button>
<input type="number" name="quantity" class="form-control" value="1" min="1" max="100" style="width:70px">
<button type="submit" class="btn btn-primary" name="TSLA" value="Buy">
<i class="fas fa-plus-circle"></i>
</button>
</form>
</td>
</tr>
</table>
</body>
</html>
/* Fit the table cell width to the contents */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol</th>
<th style="width: 0.01%">Share</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td style="width: 0.01%">1</td>
</tr>
</table>
</body>
</html>
In your code, there is a style by default, which prevents your table to be vertically in the middle.
Here it is:
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
so you can override this:
vertical-align: middle;

Tooltips inside Accordion

I am experimenting with Accordions and Tooltips. My goal is to have an accordion where I can have a table of information with a question mark on the right which will act as a Tooltip when I hover over it.
I have come up with a design and followed Bootstrap 4 documentation as well however I have been unsuccessful at making a functional tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips Testing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- DOCUMENT/CODE LINKS -->
<link rel="stylesheet" type="text/css" href="Tooltips.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="font-weight: 400;">1(01)</th>
<td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<!-- JAVASCRIPT SCRIPTS -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
CSS:
.accordion {
margin: 3vw;
border: #383838;
}
.card-header.collapsed {
background: #343a40;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}
.card-header:not(.collapsed) {
background:#343a40;
border-bottom: transparent;
}
Any help to get the tooltip working is sincerely appreciated.
Try removing this line from your script references:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Once you remove it, it should work as you want it to.

Add search box to datatable

I have to create a datatable with the search box in my web page.
I'm using the datatable library but I don't understand why the search box doesn't appear.
This is my code:
<head>
<meta charset = "utf-8">
<title>Prescriptions</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container mb-3 mt-3">
<table class="table table-striped table-bordered" style="width: 100%" id="mydatatable">
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giulio</td>
<td>1998</td>
</tr>
<tr>
<td>Riccardo</td>
<td>2000</td>
</tr>
<tr>
<td>Eleonora</td>
<td>1997</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</tfoot>
</table>
</div>
<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script>
$('#mydatatable').dataTable( {
"searching": true
} );
</script>
</body>
I've add "searching": true but when I run the code there is no search box.
What I need to do?
Thanks!
Here i have done some code for you,You can check this and i hope this will help you to learn data table in more accurate way.
Thanks
$('#mydatatable').dataTable({
"searching": true
});
div.dataTables_wrapper div.dataTables_filter input {
margin-left: 0.5em;
display: inline-block;
width: auto;
border-radius: 20px;
}
div.dataTables_wrapper div.dataTables_length select {
width: auto;
display: inline-block;
border-radius: 20px;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
background: #efe7dc80;
padding: 30px;
}
th {
background-color: white;
}
tr:nth-child(odd) {
background-color: wheat;
}
th,
td {
padding: 0.5rem;
border: solid 1px;
}
td:hover {
background-color: lightsalmon;
}
.paginate_button {
border-radius: 0 !important;
}
.body-content {
margin-top: 10%;
}
#table-container {
background: #f4f4f49e;
padding: 5%;
border-radius: 10px;
}
td {
border: none;
}
th {
border: none;
background-color: #5f81a5;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<title>Prescriptions</title>
</head>
<body>
<div class="table-container">
<div class="container mb-3 mt-3">
<table class="table table-striped table-bordered" style="width: 100%" id="mydatatable">
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giulio</td>
<td>1998</td>
</tr>
<tr>
<td>Riccardo</td>
<td>2000</td>
</tr>
<tr>
<td>Eleonora</td>
<td>1997</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.jqueryui.min.css" />
</body>
</html>
You are missing jquery and Datatable Script Import as well
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
Sorting should be like this
Order matters in script importing, and jquery script import is missing

Fitting a table properly in bootstrap3

I have this simple table. How do I prevent the table from overflowing the boundaries of the panel ? What is the right way to handle this in bootstrap when the contained table has cell data that is too long? I looked at panel with table example here to write what I have:
Bootstrap panel with table
I believe I am using the outer most "container" div incorrectly as well as I am applying row classes to it directly.
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If your cell data is too long it should be solved using text-overflow: ellipsis;. It will render Render an ellipsis ("...") to represent clipped text.
So your table cell will not overflow.
You will also have to use table-layout: fixed.
If you use table-layout: fixed- Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
Modified Snippet
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th colspan="4">Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td >Data4</td> <td colspan="4">Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to make table-layout: fixed; and in the last column use word-wrap: break-word;, because the last column contains a single word that is too long.
body { font-family: 'Oxygen', sans-serif; background-color: #3F88BF; }
.table-condensed { font-size: 12px; table-layout: fixed;}
.table-condensed td {word-wrap: break-word;}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Align text above material design icon (using materializecss)

I am currently using the materializecss framework and pulling in an icon and putting it beside a text. I need to align the text in the middle above the icon with css but what I currently have does not seem to be working.
<table class="centered">
<thead>
<th class="align-text"><i class="material-icons small">timer</i>Time</th>
<th>Another header</th>
<th>And another header</th>
</thead>
</table>
my css file at the moment:
.align-text {
display: inline-block;
text-align: center;
vertical-align: top;
}
However, the text still stays to the right of icon.
This is the result that I am ultimately trying to achieve.
Updated: Here's what you need ^_^ DEMO
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<style>
th {
display: inline-block;
}
.align-text {
display: inline-block;
text-align: center;
vertical-align: top;
}
span {
display: block;
}
</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table class="centered">
<thead>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
</thead>
</table>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>