I have set up a search bar on my php page but the results are all displayed in one long in the table. How would I make it display search one of the results on a separate line, or maybe 2 on a line? Here is the code for the page.
<?php
$names = array();
if(isset($_POST['searchterm'])) {
mysql_connect("localhost", "root", "Oliver");
mysql_select_db("videos");
$search = mysql_real_escape_string(trim($_POST['searchterm']));
$find_videos = mysql_query("SELECT * FROM `videos` WHERE `keywords` LIKE'%$search%'");
while ($row = mysql_fetch_assoc($find_videos)) {
$names[] = $row['name'];
}
}
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="images/favicon.ico">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 125% }
</style>
<meta charset="utf-8">
<title>Network TV | search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" />
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/3.1.1/animate.css" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body style="overflow-x: hidden">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Network TV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<section style="padding-top:100px; width:100%"class="container-fluid" id="section2">
<h1 class="text-center" style="color:white">Network TV</h1>
<h3 class="text-center" style="color:white"><u>Search results</u></h3>
<table class="table" style="color: white">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php foreach($names as $name) { ?>
<td><?php echo $name; ?> <strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?></td>
</tr>
</tbody>
</table>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</html>
Update
Added updated picture
Instead of putting every result into the same <tr> and <td>, place them into multiple of them.
Looking at your HTML setup, I get the feeling you didn't quite grasp how the <tr> and <td> tags function. Remember that a <tr> (table row) adds a new row to the table, and inside that row you can place a <td> (table division), which functions as a column inside that row.
If that didn't explain it for you, perhaps one of these two resources will help you further: [1] [2].
Inside your HTML, replace the <tr> block with the following:
<?php
foreach($names as $name) {
echo '<tr>
<td>' . $name . '</td>
<td><strong><h7><u>Watch!</u></h7 </strong></td>
</tr>';
}
?>
you have extra <td> tag here
<td><?php foreach($names as $name) { ?>
<td><?php echo $name; ?> <strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?></td>
Try follwing and see if it aligns the result
<?php foreach($names as $name) { ?>
<td><?php echo $name; ?></td>
<td><strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?>
Related
when I try to put in an SVG file as the logo to my website, like it tells me to do in the Kirby documentation, it properly shows up in Chrome on the left edge of the page, but not in Safari. Image provided. CSS Rules like padding, width, margin or align don't do anything, and this only seems to happen in Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?= $site->title() ?> | <?= $page->title() ?></title>
<?= css([
'assets/css/prism.css',
'assets/css/lightbox.css',
'assets/css/index.css',
'#auto'
]) ?>
<link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
</head>
<body>
<header class="header">
<a style="padding:0;" href="<?= $site->url() ?>">
<img src="/assets/icons/logo.svg" height="48">
</a>
<nav class="menu">
<?php foreach ($site->children()->listed() as $item): ?>
<a <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
<?php endforeach ?>
<?php snippet('social') ?>
</nav>
</header>
<main class="main">
Now... the App runs smoothly and fulfill every functionalities, thing is when I try to run the QATest, everyone pass through, except one:
Error: clickable element "ADD" was not found by text|CSS|xpath
This error its driving me nuts, as ADD button runs OK on the remaining test. Here is my Index.php:
<?php include("db.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST ASSESMENT</title>
<!--- Bootstrap CSS --->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="header"style="margin-top:50px;">
<form action="delete_product.php" method="post">
<div class="alignButton" style="display:flex; justify-content:space-between">
<a style="margin-left:30px;text-decoration:none;color:black;font-size:30px;" href="index.php">Product List</a>
<div class="alignButtons" style="display:flex; justify-content:flex-end">
<button style="margin-right:50px;" id="add" type="button" class="btn btn-primary" name="add" onclick="window.location.href='product_add.php'">ADD</button>
<button style="margin-right:50px;" id="delete-product-btn" type="submit" name="mass_delete" class="btn btn-danger">MASS DELETE</button>
</div>
</div>
<hr/>
</div>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<!--Get all products from DB-->
<?php
$query = "SELECT * FROM products";
$result_products = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result_products)) { ?>
<!-- <?php
if(isset($_SESSION['status'])){
echo "<h4>".$_SESSION['status']."</h4>";
unset($_SESSION['status']);
}
?> -->
<div class="col-sm-4">
<div class="card" style="margin:10px;padding:10px;width:250px;">
<input class="delete-checkbox" type="checkbox" name="check_list[]" value="<?php echo $row['id']; ?>">
<label><?php echo $row['sku']; ?> : <?php echo $row['prod_type']; ?></label>
<h5><?php echo $row['name']; ?></h5>
<p>$<?php echo $row['price']; ?></p>
<!--Conditional rendering depending on product type-->
<?php if ($row['prod_type'] == 'DVD'): ?>
<p>Size: <?php echo $row['dvd']; ?>MB</p>
<?php elseif ($row['prod_type'] == 'BOOK'): ?>
<p>Weight: <?php echo $row['book']; ?> Kgs.</p>
<?php elseif ($row['prod_type'] == 'FUR'): ?>
<p> H:<?php echo $row['fur_h']; ?>x W:<?php echo $row['fur_h']; ?>x L:<?php echo $row['fur_l']; ?></p>
<?php endif ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
<!--- Bootstrap JS --->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
And here is the QATester issue:
Check homepage basic requirements
951ms
Error: Clickable element "ADD" was not found by text|CSS|XPath
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
I.amOnPage('/');
I.click('MASS DELETE');
I.click('ADD');
The 11th following test passes OK. Even the button MASS DELETE on the same test.I have tried to Switch button order ( Mass Delete & Add), declare them with class/id; Rename button to add, Add, ADD; moved the button outside container div... Can't figure out what's the problem or what I have missing. I would really appreciate any help/clue/tip about it.
Answer: Just add the text ADD in the add button. it will pass. If you have multiple navigation for different page. type the exact 'ADD' text inside the button tag.
This is my navigation and it worked: it is in react, but similar with the html
<header>
<nav className="nav px-3 m-auto d-flex justify-content-between align-items-center border-bottom">
<h3 className="nav-title">
<Link to="/">Product {isProductListPage ? "List" : "Add"}</Link>
</h3>
<div className="nav-list d-flex align-items-center">
<Link to="/add-product">
<button className="nav-list-add btn me-3">
ADD
</button>
</Link>
<button id="delete-product-btn" onClick={handleDelete} className="btn btn-danger">MASS DELETE</button>
</div>
</nav>
</header>
I had the same problem. Just put bigger margin between buttons :)
Im trying to make a system that will print label's. but dont know how to make it as i want. It is working when i only have one row in the DB, but when i get more rows, that is when i hit some problems with the layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Din Matmerking</title>
<!-- style -->
<link href="config/stil/style.css" rel="stylesheet" type="text/css">
<link href="config/stil/oppskrift.css" rel="stylesheet" type="text/css">
<link href="config/stil/merk.css" rel="stylesheet" type="text/css">
<!-- <link href="/config/stil/base_style.css" rel="stylesheet" type="text/css"> -->
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main" class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="logo"><img src="/img/Logo2.png" class="img-responsive"></div>
</div>
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Velkommen</a>
</div>
<ul class="nav navbar-nav">
<li>Hjem</li>
<li>Oppskrifter</li>
<li>Matmerking</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logg ut</li>
</ul>
</div>
</nav>
<div class="panel-body">
<div class="well">
<div id="printableArea">
<form id="merk">
<table>
<thead>
<!-- <tr>
<th id="text">Matmerking</th>
</tr>
<tr>
<th><br></th>
</tr> -->
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td id="text"><b>Produkt: </b></td>
<td><b>'.$row["name"].'</b></td>
</tr>
<tr>
<td id="text"><b>Laget: </b></td>
<td><b>'.$row["produsert"].'</b></td>
</tr>
<tr>
<td id="text"><b>Holdbarhet: </b></td>
<td><b>'.$row["holdbarhet"].'</b></td>
</tr>
<tr>
<td id="text"><b>Pris pr kg: </b></td>
<td><b>'.$row["pris_kg"].' ,-</b></td>
</tr>
<tr>
<td id="text"><b>Laget av: </b></td>
<td><b>'.$row["signatur"].'</b></td>
</tr>
';
}
?>
</tbody>
</table>
</form>
</div>
<br>
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea')" value="Print" />
</div>
</div>
<div class="panel-footer">
<br>
<label><p>© DIN-MATMERKING.NO 2017</p></label>
<br>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>
I want the user to be able to chose form a name that is displyed in a table whit data from MySqlDB.
this is how I want it to be displayed:
Here you see how it looks when I have more rows in the DB:
Any adwise? Maybe ita possible to have a DB table displayd in html and have it so the name can be a link and open a modual where the info i want printed out is displayd.
<?php
$connect = mysqli_connect("connection",
"username", "password", "DB");
$query = "SELECT * FROM merkelapp";
$result = mysqli_query($connect, $query);
?>
DB structure
So the basic structure of your HTML should be as follows, for each label:
<div id="printableArea"> <!-- HERE YOU MUST HAVE A UNIQUE ID FOR EACH LABEL -->
<form id="merk"> <!-- HERE YOU MUST HAVE A UNIQUE ID FOR EACH LABEL AS WELL -->
<table><!-- LABEL DETAILS --></table>
<!-- HERE YOU NEED TO PASS THE UNIQUE ID OF THE AREA YOU WANT TO PRINT -->
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea')" value="Print" />
</form>
</div>
My suggestion is that you create a separate .well wrapper for each label, and by using the unique id of each row in the merkelapp table, you can create a unique ID attributes for your elements:
<?php while($row = mysqli_fetch_array($result)) { ?>
<div class="well">
<div id="printableArea<?php echo $row['id']; ?>">
<form id="merk<?php echo $row['id']; ?>">
<table>
<tbody>
<tr>
<td id="text"><b>Produkt: </b></td>
<td><b><?php echo $row["name"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Laget: </b></td>
<td><b><?php echo $row["produsert"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Holdbarhet: </b></td>
<td><b><?php echo $row["holdbarhet"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Pris pr kg: </b></td>
<td><b><?php echo $row["pris_kg"]; ?> ,-</b></td>
</tr>
<tr>
<td id="text"><b>Laget av: </b></td>
<td><b><?php echo $row["signatur"]; ?></b></td>
</tr>
</tbody>
</table>
</form>
</div>
<br>
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea<?php echo $row['id']; ?>')" value="Print" />
</div>
<?php } ?>
Note that I appended the ID of each row after the id attributes (printableArea<?php echo $row['id']; ?>) so the output of the id's will be printableArea1, printableArea2, printableArea3 and so on. I did the same for each form (merk1, merk2...).
I also changed the printDiv('printableArea') and added the row ID there so when you click on a button, it will pass the correct ID to that function.
As a side note, I recommend to escape the output using htmlentities so characters like > will not break the HTML structure by replacing it with the corresponding >, so instead of just having:
<td><b><?php echo $row["name"]; ?></b></td>
You output it like this:
<td><b><?php echo htmlentities( $row["name"] ); ?></b></td>
I have included necessary files required for Footable sorting , but columns dont have an option to sort the column values , any help would be of great help .
Code :
<!DOCTYPE html>
<html>
<head>
<title> Sorting Html Table Using FooTable </title>
<link rel="stylesheet" href="css/footable.core.css">
<link rel="stylesheet" href="css/footable.metro.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/footable.js"></script>
<script src="js/footable.sort.js"></script>
</head>
<body>
<table class="footable" >
<thead >
<!-- data-type = data type in the column -->
<!-- data-sort-ignore = disable sorting for the column -->
<!-- data-sort-initial = sort the column when the FooTable is initialized -->
<tr>
<th >Name</th>
<th ">Mark1</th>
<th ">Mark2</th>
<th " >Total</th>
</tr>
</thead >
<tbody >
<!-- populate table from mysql database -->
<?php while($row1 = mysqli_fetch_array($result)):;?>
<tr>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo $row1[3];?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.footable').footable();
});
</script>
</html>
Added the following bootstrap and jquery links to html file which solved my issue on sorting , now i can sort them :
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
I can't get rid of the unwanted white space that added itself at the end of the website.
The link to the website is : http://www.authorwilliamjwarren.com/
I tried ,
deactivating plugins
html, body { height:100%}
reset to default CSS
But none of them didn't work for this.
I've checked most of other answers to the same problem, but nothing seem to fit my case.
Any help would be greatly appreciated,
Thank you !!
In your stylesheet you have:
media="all"
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Replace it with the following:
media="all"
.navbar {
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
The position relative on the .navbar is causing your "whitespace" problem.
This is the code of Header.php file. From where do you think those links come from?
How to remove those links?
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package dazzling
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!-- favicon -->
<?php if ( of_get_option( 'custom_favicon' ) ) { ?>
<link rel="icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" />
<?php } ?>
<!--[if IE]><?php if ( of_get_option( 'custom_favicon' ) ) { ?><link rel="shortcut icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" /><?php } ?><![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if( get_header_image() != '' ) : ?>
<div id="logo">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/>
</div><!-- end of #logo -->
<?php endif; // header image was removed ?>
<?php if( !get_header_image() ) : ?>
<div id="logo">
<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
</div><!-- end of #logo -->
<?php endif; // header image was removed (again) ?>
</div>
<?php dazzling_header_menu(); ?>
</div>
</nav><!-- .site-navigation -->
Thank you!!