I am coding timesheet table using materiailze CSS with form elements in cells. I don't like a height of the table rows. Is there any way how to make the table much more compact?
If this is a limitation of materialize, what is better CSS framework option?
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<form>
<table>
<col width=100>
<col width=100>
<col width=100>
<col width=100>
<col width=200>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Date</th>
<th>Time</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="date" name="day" value="2019-01-01"></td>
<td><input type="time" name="day" value="10:00"></td>
<td><input type="date" name="day" value="2019-01-01"></td>
<td><input type="time" name="day" value="18:30"></td>
<td>
<select>
<option value=1>Regular shift</option>
<option value=2>Vacation</option>
</select>
</td>
<td><input name="day"></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
This is just a small css fix...
For exemple you can add this little piece of code :
<style>
td {padding: 2px 5px;}
td input{margin:0 !important;height:2em !important;}
td .select-wrapper input.select-dropdown{height:2em;line-height:2em;}
</style>
Related
I just used a script and Html from a codepen code in my apps-script. Table appears but two thing does not appear 1st the select and search option under Table Head. Second exporter.
Exporter is not that much important. However I need those select and input search option under Table head.
Here is a screenshot of Original table from code pen:-
And here is screenshot of my Apps-script html:-
here is the complete HTml code of apps script:-
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.css">
<?!= include('table-css'); ?>
<?!= include('table-js'); ?>
</head>
<body>
<div class="container">
<h1>Bootstrap Table</h1>
<p> Mémo pour les options du Bootstrap Table : Bootstrap Table Documentation</p>
<p>Eléments de Bootstrap Table utilisés : Data Checkbox, pour cocher les éléments à sélectionner, extension Filter control, pour les filtres via les colonnes, extension Data export pour exporter</p>
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table id="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th>
<th data-field="date" data-filter-control="select" data-sortable="true">Date</th>
<th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th>
<th data-field="note" data-sortable="true">Note</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
<td>Valérie</td>
<td>01/09/2015</td>
<td>Français</td>
<td>12/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td>
<td>Eric</td>
<td>05/09/2015</td>
<td>Philosophie</td>
<td>8/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td>
<td>Valentin</td>
<td>05/09/2015</td>
<td>Philosophie</td>
<td>4/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td>
<td>Valérie</td>
<td>05/09/2015</td>
<td>Philosophie</td>
<td>10/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td>
<td>Eric</td>
<td>01/09/2015</td>
<td>Français</td>
<td>14/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td>
<td>Valérie</td>
<td>07/09/2015</td>
<td>Mathématiques</td>
<td>19/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="6" name="btSelectItem" type="checkbox"></td>
<td>Valentin</td>
<td>01/09/2015</td>
<td>Français</td>
<td>11/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="7" name="btSelectItem" type="checkbox"></td>
<td>Eric</td>
<td>01/10/2015</td>
<td>Philosophie</td>
<td>8/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="8" name="btSelectItem" type="checkbox"></td>
<td>Valentin</td>
<td>07/09/2015</td>
<td>Mathématiques</td>
<td>14/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="9" name="btSelectItem" type="checkbox"></td>
<td>Valérie</td>
<td>01/10/2015</td>
<td>Philosophie</td>
<td>12/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="10" name="btSelectItem" type="checkbox"></td>
<td>Eric</td>
<td>07/09/2015</td>
<td>Mathématiques</td>
<td>14/20</td>
</tr>
<tr>
<td class="bs-checkbox "><input data-index="11" name="btSelectItem" type="checkbox"></td>
<td>Valentin</td>
<td>01/10/2015</td>
<td>Philosophie</td>
<td>10/20</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<script>
init({
title: 'Filter Control',
desc: 'Use Plugin: bootstrap-table-filter-control to filter table fields.',
links: [
'bootstrap-table.min.css'
],
scripts: [
'bootstrap-table.min.js',
'extensions/filter-control/bootstrap-table-filter-control.min.js'
]
})
</script>
</html>
What am I missing here?
Although I'm not sure about init() in your script, how about the following modification?
From:
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
To:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.17.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
Reference:
bootstrap-table in cdnjs
I am trying to add a row to the table when the add button is clicked and add and delete both buttons are working properly but when i add data-toggle="table" in the table tag the add and delete buttons are not working if i remove the data-toggle option i am losing features such as pagination and table styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table"
data-toggle="table"
data-mobile-responsive="true"
data-pagination="true"
data-height="460"
>
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<select id="ex1" required >
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td >
<input id="ex2" type="number">
</td>
<td >
<input id="ex3" type="number">
</td>
<td >
<input id="ex4" type="number">
</td>
<td >
<button class="btn btn-outline-success" id="addrow" class="addnew" > Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function(){
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function () {
$(this).closest('tr').remove();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</body>
</html>
The order is wrong. Add the JS library before your script...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table" data-toggle="table" data-mobile-responsive="true" data-pagination="true" data-height="460">
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="ex1" required>
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td>
<input id="ex2" type="number">
</td>
<td>
<input id="ex3" type="number">
</td>
<td>
<input id="ex4" type="number">
</td>
<td>
<button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<!-- Unrelated: version incompatibility
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
-->
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function() {
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function() {
$(this).closest('tr').remove();
});
});
</script>
</body>
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<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">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<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>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<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">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
I want to design a form which consists of a table that has a text-box and a drop-down list. When I add the drop-down list, the form gets distorted. I have these problems:
1) list is so wide. I need to make its width fits the widest text.
2) Also the height of the cells somehow increased.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
<tr>
<td><input type="text" id="text-field"></td>
<td><select name="D1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select> </td>
<td><input type="button" class="add" id="submit-button" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
NOTE: There is a third column not shown in the image. It contains a button as shown in the code.
The problem seems to be in the header of your table. You have 2 columns in the first row and 3 columns in the second row.
To keep symmetry use the following standardized code:
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="text-field">
</td>
<td>
<select name="D1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
<td>
<input type="button" class="add" id="submit-button" value="Add Row">
</td>
</tr>
</tbody>
What I have done is, I added standard and of HTML table, and added 3rd column in the header Action. You can rename it according to your need.
You will have to check your CSS as well. It might effect the form you have created!
I am using pure css to design my web page. I have this table/form on my page. Unfortunaltey it exceeds the width of my screen. How can I make the table autoamticall format so that it fits my screen? I would like that each columns "shrinks" until the table fits the screen width of the user.
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<link rel="stylesheet" href="css/layouts/style_pure.css">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<form class="pure-table">
<table class="pure-table">
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
<td>Col7</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</form>
</body>
</html>
set your table width to 100% , also set the text input fields inside each cell to 100% width.
here is a working example :
http://jsfiddle.net/ggLvLs3e/16/
CSS
.stretch{
width:100%;
}
input[type="text"]{
width:100%;
}
HTML
<table class="pure-table stretch">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>