I have created the table using DataTable.
It looks like this:
What I want to do is to split them like this:
How can I achieve that with customized CSS?
My HTML looks like this:
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>
<script>
$(document).ready(function() {
$('.sortable-table').DataTable( {
// Allow column selection, based on this
// https://datatables.net/extensions/colvis/
"dom": 'C<"clear">lfrtip',
// Except first column,
// it should stay.
// https://datatables.net/extensions/colvis/options
colVis:{exclude:[0]}
});
} );
</script>
<style>
body {
font-family: 'Helvetica Neue';
margin:150px;
}
img {
max-width:65%;
max-height:65%;
}
</style>
<title>Experiment 11</title>
</head>
<body>
<h2> G. Shared functional annotation</h2>
Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
<h3> LN </h3>
<table border="1" class="dataframe sortable-table display compact pure-table">
<thead>
<tr style="text-align: left;">
<th>GO</th>
<th>FOO</th>
<th>BAR</th>
</tr>
</thead>
<tbody>
<tr>
<td> regulation of response to wounding</td>
<td> 6.850</td>
<td> 11.975</td>
</tr>
</table>
</body>
</html>
As Per your example:
<div class="ColVis" >
<button class="ColVis_MasterButton">
<span>Show / hide columns</span>
</button>
</div>
This is your html for that button now we are applying css to it
.ColVis{
width:100%
}
button.ColVis_Button{
float:right
}
Provide Width 100% to your Colvis class and FLOAT:right to button.
Note :
If possible then apply new class for colvis and for button because if you change style of colVis then maybe it will change style in your other template or in your other layout so test it first.
example: http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/
When you see output in jsfiddle first starch the size of output screen
so you can see proper output
Try adding this rule to your CSS:
div.ColVis {
float: right;
margin-bottom: 1em;
}
Okay, so after reviewing your code then hopping on the ColVis website and inspecting their search and show/hide button, I have come to the conclusion! I need to see your CSS because, at the moment, the way they have it is predefined to inherit from the parent class. So, if you want to adjust the predefined css then manipulate this: button.ColVis_Button, ul.ColVis_collection li, this is the class hierarchy they use to move the button around. Just add the !important tag to the things you need changed.
Related
Newbie here, have mercy :D
So I have a div with two tables in it, which both include several Bootstrap buttons. I stretched them to 100% width so that they fill the whole table (which fill the whole div in return).
Whenever I click one of the buttons, I want to hide the tables and replace them by some other div that was hidden before. Also, a back button is appearing that should reverse that process.
Most of this works fine, however, after using the back button to get back to the initial state, the buttons aren't filling the whole width anymore. I'm not sure what could help, as I only touched the style of the tables, not their elements, and the tables still fill 100% width of their div as seen by the borders (see below).
I'm inlucing a minimal working example:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="expires" content="3600">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Hello!</title>
<style>
#options-div {
display: flex;
}
.action-divs, #back-button {
display: none;
}
.options-table {
table-layout: fixed;
border: 2px solid green;
width: 100%;
}
.btn-dark {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="options-div">
<div class="col-sm-2">
<button type="button" class="btn btn-dark" id="back-button">Back</button>
</div>
<div class="col-sm-8">
<table class="options-table">
<tr>
<td>
<button type="button" class="btn btn-dark btn-block" id="jet-button">Jet</button>
</td>
</tr>
</table>
<div class="action-divs" id="jet-div">
</div>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<script src="myscript.js"></script>
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
for the markup. A div with a table with one button.
And the javascript:
var jetButton = document.querySelector("#jet-button");
jetButton === null || jetButton === void 0 ? void 0 : jetButton.addEventListener("click", handleJet);
var backButton = document.querySelector("#back-button");
backButton === null || backButton === void 0 ? void 0 : backButton.addEventListener("click", handleBack);
function handleJet() {
var optionsTables = document.querySelector(".options-table");
optionsTables.style.display = "none";
var jetDiv = document.querySelector("#jet-div");
jetDiv.style.display = "flex";
backButton.style.display = "flex";
}
function handleBack() {
var optionsTables = document.querySelector(".options-table");
optionsTables.style.display = "flex";
optionsTables.style.tableLayout = "fixed";
backButton.style.display = "none";
var jetDiv = document.querySelector("#jet-div");
jetDiv.style.display = "none";
}
Sorry for the TypeScript conversion stuff, hopefully it's readable enough. Basically on click of my button, I want to hide the table and display another div and the back button. On click of the back button, I want to hide the div and the back button again and re-display the initial table (with the button in it).
I already tried Bootstrap classes like btn-block, none did work though.
Thanks in advance!
The problem is when you add flex to the table element. Your button element will take the 100% width but after flex applied the td element is minimum to content
<table class="options-table">
<tr>
<td>
<button type="button" class="btn btn-dark btn-block" id="jet-button">Jet</button>
</td>
</tr>
</table>
you can try to use align-items: stretch; and always leave flex on the table.
Also, i would recommend to use classList to add and remove classes on the element instead of change styles directly.
MDN element classList
How to use datatable in thymeleaf. i have created a table in which i am creating a div inside of td for all the user present in userInfo list
How can i show only one user record as a div and inside of pagination section display only next and previous buttons.
Currently i am getting error jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
I found some answer related to it as dataTables requires a well formed table. It must contain and . But i just want to display one div and hide other div when next button is clicked new div should be visible and hide the previous one
<table id="table_id">
<tr>
<td th:each="info : ${userInfo}">
<p th:text=${info.name}></p>
<p th:text=${info.dob}></p>
</td>
</tr>
</table>
In js i just have written this
$(document).ready( function () {
$('#table_id').DataTable();
} );
The following example shows one way in which you can use Thymeleaf to populate a table, and then use DataTables to display one row at a time (with "previous" and "next" buttons):
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<style>
.dataTables_paginate {
float: left !important;
}
</style>
</head>
<body>
<div style="margin: 20px; width: 150px;">
<table id="table_id">
<thead>
<tr>
<td>Users</td>
</tr>
</thead>
<tbody>
<tr th:each="info : ${userInfo}">
<td>
<p th:text=${info.name}></p>
<p th:text=${info.dob}></p>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#table_id').DataTable({
"dom": "tp",
"ordering": false,
"pagingType": "simple",
"lengthMenu": [ 1 ]
});
});
</script>
</body>
</html>
This creates a very simple display like this, with almost no CSS styling applied:
The Thymeleaf iterator needs to be placed in the tably body's <tr> tag, not in a cell tag.
The HTML table must be defined with both a <thead> and a <tbody> section, for DataTables to be able to use it.
The DataTables options are:
"dom": "tp" - displays only the table (t) and the pagination (p) controls.
"ordering": false - disables column ordering.
"pagingType": "simple" - shows only the "previous" and "next" buttons.
"lengthMenu": [ 1 ] - forces DataTables to show only one row at a time
I have used datatable js with fixed left column.
I couldn't able to reduce the row height.
How could I reduce or set row height?
I checked this link and other Stack Overflow answers.
http://datatables.net/forums/discussion/11828/how-do-i-set-the-row-height-in-datatables
For the first pages, they all are showing in the right height, but when i get to the end of the page, the last item covers all available space.
This is what I am getting.
Please assist me in this.
I use this to fix it,
.dataTable {
display:block;
}
.dataTable tr td {
min-width: 150px;
height:20px;
}
If i can do it with the Datatable object it will be great.
You did set the inline-style of the table to a fixed height.
<table id="a" style="height:400px;">
This is not a problem of datatables, this is normal behavior for tables in html. If you set an fixed height for the table-element the table will stretch all rendered rows and cells to fill that table-element.
You could remove that inline-style and set the row-height in the css:
$(function(){$('#a').dataTable();});
.dataTable th,
.dataTable tr {
height: 2em;
}
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<table id="a">
<thead>
<tr><th>Id</th><th>Title</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>abcdef</td></tr>
<tr><td>2</td><td>abcdef</td></tr>
<tr><td>3</td><td>abcdef</td></tr>
<tr><td>4</td><td>abcdef</td></tr>
<tr><td>5</td><td>abcdef</td></tr>
<tr><td>6</td><td>abcdef</td></tr>
<tr><td>7</td><td>abcdef</td></tr>
<tr><td>8</td><td>abcdef</td></tr>
<tr><td>9</td><td>abcdef</td></tr>
<tr><td>10</td><td>abcdef</td></tr>
<tr><td>11</td><td>abcdef</td></tr>
<tr><td>12</td><td>abcdef</td></tr>
<tr><td>13</td><td>abcdef</td></tr>
</tbody>
</table>
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
I am trying to fit a canvas element into a table cell with no padding at all, i.e. I want no margins between my canvas and top/bottom of the cell. Therefore, I define row height as 20px and canvas height as 20px. I also use padding:0px styling. However, I get no padding only from top and left and I still do get padding at the bottom. In fact, it looks like the table cell gets taller in order to accommodate for the undesired margin. How can I resolve it?
Also, what is the difference between defining canvas width and height in HTML and CSS? Will one override the other?
Below is my HTML code.
Thanks.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
Try adding the following to the canvas's style:
display : block;
Demo: http://jsfiddle.net/S7YJu/
You can see why if you look at this: http://jsfiddle.net/S7YJu/1/ - by default the canvas displays inline which means it lines up in a way that leaves space for the bottom of letters like "y" or "p" to hang beneath...
Despite your question has been already answered i would like to point the following.
Canvas element are treated very like inline elements despite the seem to be block level elements, similar to how an image element is treated. To fix your problem you have to set the style rule display to block for canvas.
with the best of intentions i would like to give you some advice :
1 You omitted th opening body tag.
2 Is recomended to put script tags at bottom.
4 Use divs instead of table elements when possible.
5 You don't always use Jquery selectors...
i.e.
document.getElementById('my_canvas');
Copy ->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.my_cell {width:100px; }
.my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
<tbody>
<tr>
<td class="my_cell"></td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
});
var canvas = $('.my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,0,20,20);
</script>
</body>
</html>