SQLite PHP Not Filling HTML Table

SQLite PHP Not Filling HTML Table - javascript

I am making an inventory using HTML and SQLite, using PHP to connect to the server and extract data. After extracting data, I need to populate an HTML table however this is not working. When I try to do console.log in order to see what's working, it does not show up in Chrome console. :(
Please ask if the database file is needed as it is a local database file in the working folder.
body {
font-family: 'Open Sans', sans-serif;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 15px;
text-align: center;
}
table tr:nth-child(even) {
background-color: #eee;
}
table tr:nth-child(odd) {
background-color: #fff;
}
table th {
color: white;
background-color: black;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
animation: fadeEffect 1s;
}
/* Go from zero to full opacity */
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* Style buttons */
.btn {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
.btnadd {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btnadd:hover {
background-color: RoyalBlue;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
<!DOCTYPE html>
<html>
<head>
<title>Inventory Server</title>
<link rel="stylesheet" a href="InventoryServer.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h2 style="text-align: center">Welcome to the inventory!</h2>
<!-- Trigger/Open The Modal -->
<button class="btnadd" id="btnadd"><i class=material-icons>add_circle</i></button>
<div class="tab">
<button class="tablinks" onclick="openLocation(event, 'Kitchen')" id="defaultOpen">Kitchen</button>
<button class="tablinks" onclick="openLocation(event, 'Shed')">Shed</button>
</div>
<div id="Kitchen" class="tabcontent">
<h3>Kitchen</h3>
<table style="width: 100%">
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Unit</th>
<th>Description</th>
</tr>
<?php
$db = "inventory.db";
$handle = sqlite_open($db) or die("Could not open database");
$query = "SELECT Name,Quantity,Unit,Description FROM kitchen ";
$result = sqlite_query($handle, $query) or die("Error in query: ".sqlite_error_string(sqlite_last_error($handle)));
while($row = sqlite_fetch_array($result)) {
?>
<tr>
<td><?php echo $row['Name']?></td>
<td><?php echo $row['Quantity']?></td>
<td><?php echo $row['Unit']?></td>
<td><?php echo $row['Description']?></td>
</tr>
<?php
}
?>
<?php
sqlite_close($handle);
?>
</table>
</div>
<div id="Shed" class="tabcontent">
<h3>Shed</h3>
<table style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Unit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
$connect = mysql_connect("inventory.db","root", "", "inventory");
if (!$connect) {
die(mysql_error());
}
$results = mysql_query("SELECT * FROM shed ");
while($row = mysql_fetch_array($results)) {
?>
<tr>
<td><?php echo $row['name']?></td>
<td><?php echo $row['quantity']?></td>
<td><?php echo $row['unit']?></td>
<td><?php echo $row['description']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- The Modal -->
<div id="btnAddForm" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 style="text-align: center">Add New Item To Inventory</h2>
</div>
<div class="modal-body">
<form action="#" method="post" role="form" data-toggle="validator" class="form-container">
<div class="form-group margin-top-m">
<label for="name" class="control-label">Name Of Item: </label>
<input type="text" id="nameOfItem" name="nameOfItem" class="form-control" data-error="Please enter the item name!" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="quantity" class="control-label">Quantity of Item: </label>
<input type="text" id="quantityOfItem" name="quantityOfItem" class="form-control required" data-error="Please enter the quantity of the item!" required>
<div class="help-block with-errors"></div>
</div>
<div class="row">
<div class="col-md-6 mid-col">
<div class="form-group">
<label for="unitOfItem" class="control-label">Item Unit: </label>
<select name="unitOfItem" id="unitOfItem" class="form-control required" data-error="Please select a unit!" required>
<option value=""></option>
<option value="piece">piece(s)</option>
<option value="grams">g</option>
<option value="kg">kg</option>
<option value="mL">mL</option>
<option value="L">L</option>
<option value="item">item(s)</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 mid-col">
<div class="form-group">
<label for="place" class="control-label">Select a place: </label>
<select name="place" id="place" class="form-control required" data-error="Please select the item location!" required>
<option value=""></option>
<option value="Kitchen">Kitchen</option>
<option value="Shed">Shed</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="descriptionOfItem" class="control-label">Item description: </label>
<input type="text" id="descriptionOfItem" name="descriptionOfItem" class="form-control required" data-error="Please enter a valid item description!" required>
<div class="help-block with-errors"></div>
</div>
<p class="margin-0"><button type="submit" class="btn btn-lg orange w-100 margin-top-s">Submit</button></p>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="require.js"></script>
<script>
// Get the modal
var modal = document.getElementById('btnAddForm');
// Get the button that opens the modal
var btn = document.getElementById("btnadd");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
document.getElementById("defaultOpen").click();
function openLocation(evt, locationName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(locationName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>

Related

How to add input value to html table column after pressing a button (javascript)

I have a form that will ask for user input and it included drop down list and entry box. After user inserted the value and press on "OK", those value should be appear on my html table based on their category. The html table row will be add automatically when it detect a second value inserted by the user. Currently I have created the html form and it will automatically added when I pressed on add new header, but how can I add the row by knowing there is a new input by the user? All the value should be store in the respective column.
When user input a new value and press OK, the system will check whether the first row value is exist or not, if its exist it will display the new value (Event parameter, type of condition and Value to match) to the next row.
A form will pop up for user to enter the value
After user click on OK, all the value will store at the first row
When user add another input and click OK, a second row will automatically appear and display the second input at second column.
Another input entered by user
My html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {font-family: 'Quicksand', sans-serif;}
.button {**
border-radius: 50px;
background-color: #ff9633;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
margin-left:500px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 45%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #ff9633;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #ff9633;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9633;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:
#fa7d34;
}
</style>
</head>
<body>
<ul>
<li><div id="myBtn1">Alert Policies</div></li>
<li>Test3</li>
<li>Test4</li>
</ul>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Alert Policies</h2>
</div>
<div class="modal-body">
<p style="font-size:14px">Please select an event parameter as well as the condition type and value that apply.</p>
<!-- parameter drop down -->
<form method="post">
<label for="Parameter"> <b style="font-size:13px" > Event parameter to evaluate </b></label>
<select name="Parameter" id="Parameter" style="width:340px; font-family: 'Quicksand', sans-serif;">
<option disabled selected value>select a parameter</option>
<option value="Subject">Subject</option>
<option value="Text">Text</option>
</select>
<br><br>
<label for="Condition"> <b style="font-size:13px" > Type of condition </b></label>
<select name="Condition" id="Condition" style="width:340px; margin-left:69px; font-family: 'Quicksand', sans-serif;">
<option disabled selected value>select a condition</option>
<option value="Equals">Equals</option>
<option value="Contain">Contain</option>
<option value="NotContain">Does not contain</option>
</select>
<br><br>
<label for="valuetomatch"> <b style="font-size:13px" > Value to match</b></label>
<input type="text" id="valuetomatch" name="valuetomatch" style="width:333px; margin-left:80px; font-family: 'Quicksand', sans-serif;">
<br>
<br>
<button class="button" ><span>OK</span></button>
</form>
</div>
</div>
</div>
<form id='test' method="post">
<div class="table-responsive">
<table id="form_table" class="table table-bordered">
<tr>
<th>No</th>
<th>Event parameter to evaluate</th>
<th>Type of condition</th>
<th>Value to match</th>
</tr>
<tr class='case'>
<td><span id='snum'>1.</span></td>
<td><input class="form-control" type='text' disabled name='eventpara[]'/></td>
<td><input class="form-control" type='text' disabled name='typecondition[]'/>
<td><input class="form-control" type='text' disabled name='valuematch[]'/>
<table class="table table-bordered"></table>
</td>
</tr>
</table>
<button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>
<script>
//add tablebox
$(document).ready(function(){
$(".addmore").on('click', function () {
var count = $('#form_table')[0].rows.length;
var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
data += "<td><input class='form-control' type='text' disabled name='eventpara[]'/></td><td><input class='form-control' type='text' disabled name='typecondition[]'/><td><input class='form-control' type='text' disabled name='valuematch[]'/><table class='table table-bordered'></table></td></tr>";
$('#form_table').append(data);
});
$('form#test').on('click', '.childtbl', function () {
var $titlesTable = $(this).next('table')[0];
var titlesCount = $titlesTable.rows.length + 1;
var data1 = "<tr class='case1'><td><span id='snum1" + titlesCount + "'>" + titlesCount + ".</span></td>";
data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
$($titlesTable).append(data1);
});
});
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>

Add id to the modal form button
<button id="addData" class="button" ><span>OK</span></button>
Create an empty array in script
<script>
var arrayOfData = []
Add the following code in the jquery
$("#addData").on('click', function () {
const parameter = $('#Parameter').val()
const condition = $('#Condition').val()
const value = $('#valuetomatch').val()
arrayOfData.push({
parameter,
condition,
value
})
var data = `<tr><th>No</th><th>Event parameter to evaluate</th><th>Type of condition</th><th>Value to match</th></tr>`;
arrayOfData.forEach((item, index) => {
data += `<tr class='case'><td><span id='snum${index + 1}'>${index + 1}</span></td><td><input class='form-control' type='text' disabled name='eventpara[]' value="${item.parameter}"/></td><td><input class='form-control' type='text' disabled name='typecondition[]' value="${item.condition}"/><td><input class='form-control' type='text' disabled name='valuematch[]' value="${item.value}"/><table class='table table-bordered'></table></td></tr>`
})
$('#form_table').html(data);
});

html align table next to textarea

I have a textarea/button and a table in my page body, I have my table aligned next to my textarea/button which is fine and all, but my table doesn't stretch down to fit the full height of the div, I tried setting height=100px , 100%, and 100 in my html element,
https://jsfiddle.net/martinradio/b4z735tk/32/
<!DOCTYPE html>
<html>
<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='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<table class="fixed" align="left" style="table-layout: fixed; width: 539px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th>Tags Type</th>
<th>Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked=""
onchange="prepUpdateTagsBox()">
</td>
<td>Release Artist(s)</td>
<td>
<div>
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Release Info</td>
<td>
<div>
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked=""
onchange="prepUpdateTagsBox()">
</td>
<td>Tracklist</td>
<td>
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked=""onchange="prepUpdateTagsBox()">
</td>
<td>Combinations</td>
<td>
<div>
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>
How can I make my table always fit the width of the div its in? Thanks

the answer is simple first: wrap your table with a div then give your table a hight: 100% then it will work I used the class h-100 since you are using bootstrap.
ps: use this website to validate your HTML file https://validator.w3.org/
<div>
<table class="fixed h-100" align="left" style="table-layout: fixed; width: 539px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th>Tags Type</th>
<th>Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Release Artist(s)</td>
<td>
<div>
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Release Info</td>
<td>
<div>
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Tracklist</td>
<td>
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Combinations</td>
<td>
<div>
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

html responsive textarea / button / table

I'm working on a site with a textarea / button / table in the body content.
My content is responsive enough, except for very thin displays (like mobile) in which case the table does not wrap and becomes unusable, and the button doesn't expand to fill the entire area.
(in line code element doesn't seem to be playing nice, but this jsfiddle is a better example)
https://jsfiddle.net/martinradio/b4z735tk/40/
How can I make the table more responsive so that when my window gets resized, the table has some sort of word wrap (like a scroll) similar to the textarea
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<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='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; width: 533px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>

I have edited your code here: https://jsfiddle.net/r0bny6h7/
To make the table itself responsive on smaller screens, I changed the fix width of 553px to "max-width: 553px". Essentially what this does is on larger screens, makes sure that the element does not go over 553px, but on smaller screens, it will automatically reduce in size to fit the screen.
To expand the button on smaller screens, just add a max-width (in this case, "max-width: 553px" to match the table) and "width: 100%" to ensure that it takes up the full width on smaller screens.
To make the table contents have word wrap, just add "word-wrap: break-word;" and "white-space: normal;" to the table, th, td.
Just a small note, but it was a bit difficult to navigate through your code since you mixed inline and declarative CSS styles. I would suggest sticking to one type, especially if you have styles that will be reused throughout the code (for example, you add "text-align: center" to a lot of the table contents. You can clean it up by applying it to the whole element instead, or a specific class.)
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
white-space: normal;
word-wrap: break-word;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<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='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer; max-width: 553px; width: 100%;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; max-width: 533px;" height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>

How to code the validation in javascript

I'm very new to Javascript. I have done one template for login, It is working like a charm. Here My question is how to set up the validation and navigation like if(username==root && password==root) then it should redirect into other page. I just post my code. I didn't include the css code. Then i did this code in html in that i have try to write the javascript but i don't know how to handle this.
My code:
<!DOCTYPE html>
<html>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #0077B5;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 10px 0 5px 0;
position: relative;
}
img.cisco{
width: 30%;
border-radius: 30%;
}
.container {
padding: 10px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
/*overflow: auto; Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 5px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 200px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
.Center {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
<body>
<h2><text-align:center>Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" method="post" name="myform">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/cisco1.png" alt="Cisco" class="cisco">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" id="username" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" id="password" placeholder="Enter Password" name="psw" required>
<button type="submit" id="login" onclick="validate()">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
var attempt = 3; //Variable to count number of attempts
//Below function Executes on click of login button
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "root" && password == "root"){
alert ("Login successfully");
console.log("Redirecting to welcome page...")
window.location = "success_new.html"; //redirecting to other page
return false;
}
else{
attempt --;//Decrementing by one
alert("You have left "+attempt+" attempt;");
}
//Disabling fields after 3 attempts
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>

At last I fix it. The issue here was "return" function on the onclick listener. here is that one
add return before the validate function
<button type="submit" id="login" onclick=" return validate()">Login</button>
Then it's works fine.

var username = document.getElementById('uname');
var pwd = document.getElementById('psw');
document.getElementById("b").onclick = function(){
if(username.value == "root" && pwd.value == "root"){
console.log("Redirecting to welcome page...")
window.location = "welcome.html";
}
}
<h2 text-align:"center">Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block';">Login</button>
<div id="id01" class="modal" style="display:none;">
<form class="modal-content animate" action="">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/logo1.png" alt="Logo" class="logo1">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button type="button" id="b">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Fixed it. If I were you, I'd go over these and look at each difference to see what went wrong. It should be noted that you shouldn't do client-side validation like this, because anyone can easily:
See the password and username
Go to the url directly
Etc.
You really should do this server-side.

why doesnt my javascript work in my popup Modal

i have a view in which i have a popup modal which gets a search string and search for the details in the database.
the problem is that when i write my search string and press search button, the javascript is not triggered.
The following are my codes
<html>
<head>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script>
$(document).ready(function () {
$("#records_table").on("click", "tr", function () {
$(this).addClass('selected').siblings().removeClass('selected');
var usern = $(this).find('td:nth-child(1)').html();
var name = $(this).find('td:nth-child(2)').html();
var email = $(this).find('td:nth-child(3)').html();
var emails = $(this).find('td:nth-child(4)').html();
document.getElementById("1").value = usern;
document.getElementById("2").value = name;
document.getElementById("3").value = email;
document.getElementById("4").value = emails;
});
$('#openBtn').click(function (event) {
$(".rower").empty();
var search = $('#searchAttr').val();
if (search != '') {
$.getJSON('#Url.Content("~/DBTestAccPAcs/GetRecord")', { search: search }, function (FacilityData) {
$(function () {
for (var i = 0; i < FacilityData.DivID.length; i = i+4) {
$('<tr class="rower">').append(
$('<td>').text(FacilityData.DivID[i]),
$('<td>').text(FacilityData.DivID[i + 1]),
$('<td>').text(FacilityData.DivID[i + 2]),
$('<td>').text(FacilityData.DivID[i + 3])
).appendTo('#records_table');
}
});
});
}
});
});
</script>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<input id="searchAttr" name="searchAttr" />
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>
<input type="text" id="1" /><input type="text" id="2" /><input type="text" id="3" /><input type="text" id="4" />
<!-- Button to open the modal -->
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
#*<form class="modal-content animate" action="/action_page.php">*#
<div class="modal-content animate">
<div class="container">
<div class="my">
<input id="searchAttr" name="searchAttr" />
<button href="#myModal" id="openBtn" data-toggle="modal" class="btn btn-success">search</button>
</div>
<div id="result">
<div class="table-responsive" style="height:300px; overflow:auto;">
<table id="records_table" border='1' class="table table-bordered table-condensed table-hover table-responsive">
<thead>
<tr>
<th>Vendor Part Number</th>
<th>Description</th>
<th>Location Code</th>
<th>Quantity</th>
</tr>
</thead>
<tbody id="getrid"></tbody>
</table>
</div>
</div>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
any help will really be appreciated.
Thanks

We Keep Coding

JavaScript is the programming language of the Web.

SQLite PHP Not Filling HTML Table - javascript

Related

How to add input value to html table column after pressing a button (javascript)

html align table next to textarea

html responsive textarea / button / table

How to code the validation in javascript

why doesnt my javascript work in my popup Modal

Categories

Resources