I'm creating a webpage that contains tables that pull data from mysql database. When I want to add a footer, footer does not show up at the bottom of the page. I've tried html's regular footer class, bootstrap footer, sticky footer but none of them worked. I've also tried all position values. Even though I write random stuff at the bottom of the code, before the body closing tag, it still shows it at the beginning.
You can see the page from: http://sagtekin.com/letseat/donat.php
Thank you very much for your help.
Edit: Code is below:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="text/html;charset=iso-8859-9" http-equiv="content-type">
<meta content="text/html;charset=windows-1254" http-equiv="content-type">
<meta content="text/html;charset=x-mac-turkish" http-equiv="content-type">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<title>Let's Eat - Donatello Pizza</title>
<style>
body {
background: url(background/bg-03.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
#infoCard {
background: #FAFAFA;
margin-top: 100px;
}
#header {
position: fixed;
width: 100%;
z-index: 1;
box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
-moz-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
-webkit-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
}
div {
border-radius: 5px;
}
</style>
</head>
<body>
<header id="header" class="w3-container w3-teal">
<h1><b>LET'S EAT</b></h1>
</header>
<div class="w3-responsive">
<div class="w3-third w3-container">
</div>
<div class="w3-third w3-container">
<div id="infoCard" class="w3-card-16">
<header class="w3-container w3-teal">
<h1>Donatello Pizza</h1>
</header>
<p style="color: #4CAF50; text-align: center; margin-top: 10px; font-size: large; vertical-align: middle;">
<b>OPEN</b></p>
<hr />
<div>
<p id="textDisplay" style="text-align: center">Hover your mouse
over the buttons.</p>
</div>
<hr />
<div class="btn-group btn-group-justified">
<a class="btn btn-primary" href="tel:05338643695" onmouseout="resetText()" onmouseover="changeTextTurkcell()">
Turkcell</a>
<a class="btn btn-primary" href="tel:05488643695" onmouseout="resetText()" onmouseover="changeTextTelsim()">
Telsim</a>
<a class="btn btn-primary" href="tel:03927147083" onmouseout="resetText()" onmouseover="changeTextLandLine()">
Landline</a>
<script>
function changeTextTurkcell()
{
document.getElementById("textDisplay").innerHTML="<b>0533 864 3695</b>";
}
function changeTextTelsim()
{
document.getElementById("textDisplay").innerHTML="<b>0548 864 3695</b>";
}
function changeTextLandLine()
{
document.getElementById("textDisplay").innerHTML="<b>0392 714 7083</b>";
}
function resetText()
{
document.getElementById("textDisplay").innerHTML="Hover your mouse over the buttons.";
}
</script>
</div>
</div>
</div>
<div class="w3-third w3-container">
</div>
</div>
<div class="w3-quarter w3-container">
</div>
<div class="w3-half w3-container">
<div class="w3-responsive w3-card-16" style="margin-top: 50px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Breakfast</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Pizzas</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Chicken</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Pasta</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Other</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-quarter w3-container">
</div>
</div>
<!--<div class="w3-container w3-teal" style="position:absolute; bottom:0px;">
<h5>LET'S EAT</h5>
<p>© 2015 Poyraz Sagtekin.</p>
</div>-->ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</body>
</html>
I isolated what I presumed to be your footer code which was a string of letters like:
ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
I wrapped that in a div with the following styles and it appeared at the bottom of the page:
<div style="clear:both;">
ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</div>
It appears you just need to clear your previous element to "force" your footer to the bottom of the page.
Extension to #Samuels answer, you must put that in a <div> or a <footer> tag and then style it by simply using clear: both; or you could add more to it like position: fixed; bottom: 0; line-height: 15px; the list could go on and on.
Related
I've designated a background image for the whole page. On top of this I would like to have a header, with a solid background color, with my logo on the left side, business name in the middle, and my name on the right side.
Below this I would like 3 columns for the main page of my site, each probably with their own background color if that's possible.
I'm trying to use bootstrap to give my header three sections (logo-text-name), and I'd like the text to be centred.
The reason I have so much padding is because the logo kept hanging out the bottom of the header.
Now I'm sure there's a lot I'm doing wrong, but if anyone could help I'd be eternally grateful. Thanks.
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 30px 10px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-xs-2">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
Bootstrap 5 really brings flexbox to the table, so I'd use that rather than wrestling with columns, which can be troublesome due to inflexibility.
Here I've replaced your container, row, and columns with a simple flex row. Item alignment on the cross axis centers things up. The center element has Bootstrap's flex-fill class on it to make it stretch.
Also notice that I've replaced your custom margin and padding with Bootstrap
spacing classes to clean things up.
body {
background-image: url(https://via.placeholder.com/1200);
}
header {
background-color: #539e8a;
color: #f6c5be;
border-radius: 25px;
}
#logo {
width: 160px;
height: 140px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="mt-3">
<div class="d-flex align-items-center">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">
<div class="flex-fill text-center">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="px-3">
<p>My Name</p>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
I make some changes and add somethings to your code so I hope I hope I could help you!
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 0px 0px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
}
#top-part-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.col-xs-2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.col-xs-8 {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-2 {
padding: 20px 10px 0px 0px;
color: #000000;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#top-part-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header>
<div class="container" id="top-part-1">
<div class="col-xs-2">
<img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</header>
<div class="header-2">
<div class="container" id="top-part-2">
<div class="col-xs-2">
<h2> col 1 </h2>
</div>
<div class="col-xs-8">
<h2> col 2 </h2>
</div>
<div class="col-xs-2">
<h2> col 3 </h2>
</div>
</div>
</div>
I am trying to generate a bill for my system in Laravel, for which I have created a blade with my bill format as below:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bill</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style type="text/css" media="all">
body { font-family: "Roboto", serif; font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #000000; }
.table { color: #000; }
.table td, .table th { border-top: 1px solid #000;
border-bottom: 1px solid #000;}
.table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
.small-heading{
font-size: 0.8rem;
border: groove;
}
#sign {
position: relative;
min-height: 150px;
}
#sign-content {
position: absolute;
bottom: 0;
}
#thankyou{
position: absolute;
bottom: 0;
right:0;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid pt-2" style="border:1px solid black;">
<!-- Invoice heading -->
<table class="table table-borderless">
<tbody>
<tr>
<td class="border-0">
<div class="row">
<div class="col text-center text-left mb-3">
<p>Counter</p>
</div>
<div class="col-md text-center mb-3 mb-md-0" style="min-width: 50%">
<h2 class="mb-1"> DIAMOND </h2>
</div>
<div class="col text-center text-md-right">
<p>Phone: 78787878789
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<div class="table-responsive-xl" style="min-height: 500px">
<table class="table" style="margin-bottom: 0; width:100%;">
<thead>
<tr>
<th>क्र.सं.<br>S.N </th>
<th>Description of Goods</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Tilhari</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col-md mt-0 text-md-left mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black;
border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"> <strong>Carat</strong> </p>
<div class="row">
<div class="col-md-6 text-md-center">
24 Carat 100 <br>
</div>
<div class="col-md-6 text-md-center">
24 Carat 100<br>
</div>
</div>
</div>
<div class="col-md mb-3 mb-md-0" style="max-width:23% ;border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"><strong>Imp</strong></p>
</div>
<div class="col-md mb-3 mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
</div>
<div class="col" style="padding-left: 0">
<table class="table" style="margin: 0">
<tbody>
<tr>
<td colspan="12">
</td><td class="text-right">Total</td>
<td>$2,400.00</td>
</tr>
</tbody>
</table>
<div id="sign" class="col" style="height: 150px; border-bottom:1px solid black">
<span id="thankyou">Thank you!</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md">
<div class="row">
Email: <u></u>
</div>
</div>
<div class="col-md">
On Sale!
</div>
<div class="col-md text-center ml-5" >
<p style="text-align: left">981111111
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I have used dompdf to generate the bills but upon generating the bill, it is generated succesfully but the layout is all messed up. It is not as it seem in the browser.
In the browser:
pdf generated:
How can I fix the issue?
Through my research, I found out that Dompdf does not yet support Bootstrap grid system, due to which my contents were getting overlapped. I re-wrote all the css and the issue got fixed.
code:
<style>
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
#bot {
margin-bottom: 2em;
}
#left {
font-size: 14px;
float: left;
width: 42%;
color: #000;
}
#right {
font-size: 14px;
float: right;
width: 58%;
color: #000;
}
table, td, th {
border: 1px solid #000;
text-align: left;
font-size: 14px;
font-weight: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
#pp {
font-size:14px;
color:#000;
}
.table-responsive {
overflow-x: hidden!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding:0px!important;
}
</style>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
<div class="col-md-12" id="bot">
<div class="col-md-2">
<img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
</div>
<div class="col-md-10">
<div class="center">
<h3>
Lingaya's Vidyapeeth, Fraidabad<br>
Award Sheet<br>
End Semester Examination<br>
(May-June, 2019)
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div class="left">
<p>Department: </p>
</div>
<div class="right">
<p><?php echo $award[0]['department_name']?></p>
</div>
<div class="left">
<p>Program/Course: </p>
</div>
<div class="right">
<p><?php echo $award[0]['classes']?></p>
</div>
<div class="left">
<p>Subject Name: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject']?></p>
</div>
<div class="left">
<p>Session: </p>
</div>
<div class="right">
<p><?php echo $award[0]['session']?></p>
</div>
</div>
<div class="col-md-6">
<div class="left">
<p>Semester: </p>
</div>
<div class="right">
<p><?php echo $award[0]['yearsOrSemester']?></p>
</div>
<div class="left">
<p>Subject Code: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject_code']?></p>
</div>
<div class="left">
<p>Maximum Marks: </p>
</div>
<div class="right">
<p></p>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-12">
<div class="table-responsive">
<table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<th>S.No.</th>
<th>Roll No.</th>
<th>Marks(In Figure)</th>
<th>Marks(in Words)</th>
</thead>
<tbody>
<?php
$i=1;
foreach($award as $row)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['roll']; ?></td>
<td></td>
<td></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Pass: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Fail: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('print_wrapp');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
In this code I am simply run print content inside div <div id="print_wrapp"> by click function i.e printDiv and its working properly but the problem is that print preview css not showing div content properly and an image is mention below:
and my original page look like:
So, How can I fix this problem? Please help me.
Thank You
You can apply the style sheet too both print and screen using media='screen,print'
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
When we want to apply some style when printing a page, we need to apply the styles using #media print. Then only the style will apply for windows print function.
Style.css
#media print
{
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
}
Then link the css file where you want to print the page with style.
<link rel="stylesheet" type="text/css" href="Style.css">
Call the Print Function on Button Click
<button onclick="printPage()" class="center">Print</button>
<script>
function printPage()
{
print();
}
</script>
I have 3 divs ( Tables, Restaurants, Serveurs ( Waiters) )
so the scenario is :
1)create a table
2) drag it to restaurant div
3) drag waiters to the table
I use drag and drop functionality of html..
I wanted to sort the list of the waiters that are affected to a specific table.. I used Jquery plugin for that.. it worked properly
now I'm facing another issue that I couldn't remove a waiter from a table ( drop it back to list of waiters) just after adding that plugin...
This is the code..
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant" ondrop="drop(event,this)" ondragover="allowDrop(event)">
#for($i=1;$i<=count($tables);$i++)
<div id="table_{{$tables[$i-1]->id}}" style="height: {{count($tables[$i-1]->waitersAvailableTable)*80}}px;" class="table_restaurant sortable" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event,this)">Table {{$tables[$i-1]->num_table}}
#foreach($tables[$i-1]->waitersAvailableTable as $waiterTable)
<div id="{{$waiterTable->waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_{{$tables[$i-1]->id}}"><img src="{{asset($waiterTable->waiter->user->image)}}" height="40px;" />{{$waiterTable->waiter->user->name}} {{$waiterTable->waiter->user->surname}}</div>
#endforeach
</div>
#endfor
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters" ondrop="drop(event,this)" ondragover="allowDrop(event)">
#if(count($waiters)>0)
#foreach($waiters as $waiter)
<div id="{{$waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" ><img src="{{asset($waiter->user->image)}}" height="40px;" />{{$waiter->user->name}} {{$waiter->user->surname}}</div>
#endforeach
#else
<li><span>Ajouter un serveur</span></li>
#endif
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
} );
</script>
The sortable widget has a lot of drag and drop functionality built in, if you're using the widget, you should remove your own drag and drop code. Use the connectWith option to determine which lists should be allowed to have items drag and drop between them. You can use the events to hook in your own code to do things when items move between lists if necessary.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sortable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.table_restaurant,
.waiters
{
min-height: 30px;
border: 1px solid #000;
}
.waiter
{
border: 1px solid #000;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table_1" class="table_restaurant sortable connectedSortable" draggable="true""
ondrop="drop(event,this)">Table 1
<div id="waiter_1" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Bob</div>
<div id="waiter_2" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Alice</div>
</div>
</div>
<div id="table_2" class="table_restaurant sortable connectedSortable" draggable="true"">Table 1
<div id="waiter_3" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Jim</div>
<div id="waiter_4" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Zoe</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters sortable connectedSortable" ondrop="drop(event,this)">
<div id="waiter_5" class="waiter" draggable="true" ondragstart="drag(event)">John</div>
<div id="waiter_6" class="waiter" draggable="true" ondragstart="drag(event)">Emily</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$(".sortable").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
});
</script>
</body>
</html>
Consider the following example. If you really need to use <div> elements, you will have to adjust the items option for your Sortable.
$(function() {
$(".waiters").sortable({
connectWith: "ul.waiters",
placeholder: "target-drop"
});
$(".sortable").disableSelection();
});
.waiters {
list-style-type: none;
margin: 0;
padding: 0;
background: #eef;
min-height: 82px;
min-width: 82px;
}
.waiter {
height: 80px;
width: 80px;
text-align: center;
background: #CCCCCF;
margin: 1px;
padding: 4px 2px;
float: left;
}
.target-drop {
height: 78px;
width: 78px;
background: #EEE;
border: 1px dashed #ccc;
float: left;
margin: 1px;
padding: 4px 2px;
}
.waiter .waiter-name {
font-weight: normal;
font-size: .65em;
width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.r-table {
min-height: 90px;
border: 1px solid #CCC;
display: inline-block;
padding: 3px;
text-align: center;
}
.top4 {
width: 90px;
}
.top8 {
width: 172px;
}
.r-table .table-name {
font-weight: normal;
font-size: .65em;
line-height: 10px;
}
<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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table-0" class="r-table top4">
<label class="table-name">Table 1</label>
<ul class="waiters">
</ul>
</div>
<div id="table-1" class="r-table top4">
<label class="table-name">Table 2</label>
<ul class="waiters">
</ul>
</div>
<div id="table-2" class="r-table top8">
<label class="table-name">Table 3</label>
<ul class="waiters">
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs</span>
</div>
<ul id="waiters" class="waiters" style="padding: 2px; min-height: 86px;">
<li id="waiter-1" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Bart Simpson</label>
</li>
<li id="waiter-2" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Lisa Simpson</label>
</li>
<li id="waiter-3" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Milhouse Van Houten</label>
</li>
<li id="waiter-4" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Martin Price</label>
</li>
</ul>
<p style="clear: both;">
<span>Ajouter un serveur</span>
</p>
</div>
This allows you to assign, move, or unassigned servers to tables. You did mention if you need to assign the same server to multiple tables or not.
Hope that helps.
Im creating my site and require a 2 column layout on my page.
I have this code available for the one column layout.
<HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once('header.php'); ?>
<div class="header_02"><center>one column layout</center></div>
<div style="position:relative">
<div>
<div style="position:absolute; left:30; top:30;">
<img src="images/xclo.jpg" width="350" height="215">
</div> </div>
<div style="position:absolute; left:0; top:0;">
<img src="images/frame.png" width="400" height="400">
</div>
</div>
column 2 content goes here.
</div></div>
<?php include_once('footer.php'); ?>
</body>
</HTML>
which displays fine.
however when I change it to this:
<HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once('header.php'); ?>
<div class="header_02"><center>2 column layout</center></div>
<div style="position:relative">
<div id="container">
<!-- Start Column 1 -->
<div id="column1">
<div>
<div style="position:absolute; left:30; top:30;">
<img src="images/xclo.jpg" width="350" height="215">
</div> </div>
<div style="position:absolute; left:0; top:0;">
<img src="images/frame.png" width="400" height="400">
</div>
</div>
</div>
<div id="column2">
column 2 content goes here.
</div></div>
<?php include_once('footer.php'); ?>
</body>
</HTML>
with this css code in style.css
#container {
float: left;
width: 98%;
position:relative;
font-size: 22px;
}
#column1, #column2 {
width: 45%;
float: left;
position:relative;
}
#column1 {
overflow:hidden;
}
#column2 {
border-left: 1px solid #000000;
padding-left:30px;
}
it does not display the column 1 content.
my question to you is this:
how can I get this to work?
am I missing something?
please help me.
thank you.
I have simplified your layout a bit, you might be able to build on this:
This is HTML:
<div>
<center>2 column layout</center>
</div>
<div id="container">
<div id="column1">Coumn 1 content</div>
<div id="column2">column 2 content goes here.</div>
</div>
This is CSS:
#container {
font-size: 22px;
}
#column1 {
float: left;
width:50%;
background-color: green;
}
#column2 {
float: left;
width:50%;
background-color:red;
}