I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>
Related
I am generating invoices dynamically using thymeleaf and HTML and have used bootstrap 5 to lay out the whole thing which uses CSS3 but when I need to generate a PDF from HTML, everything works fine but the layout gets messed up as the used library doesn't support CSS3.
I have tried using flying saucer, and openhtmltopdf-pdfbox but none of them gives the desired results.
Generated HTML From thymeleaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<link rel="stylesheet" href="templates/css/bootstrap.min.css">
<style media="all">
:root {
--primary-color: #E01B33;
}
.theme-background-color {
background-color: var(--primary-color);
}
.theme-text-color {
color: var(--primary-color);
}
tfoot {
border-bottom: 0;
}
</style>
</head>
<body>
<div class="px-4" id="container">
<div class="row">
<div class="col">
<h2 class="fw-bold">ABC</h2>
<br/>
<h3>asdasdsad</h3>
<br/>
<text>Phone Number:- asdasdasd</text>
<br/>
<text>Email:- sadasdasd</text>
<br/>
<text>Gst No.:- asdasdasdas</text>
</div>
</div>
<h1 class="text-center mt-4 fw-bold theme-text-color">Sale Invoice</h1>
<div class="row mt-4">
<div class="col">
<text class="fw-bold">Bill to:</text>
<br/>
<text class="fw-bold">asdasdasd</text>
<br/>
<text>asdasdasda</text>
<br/>
<text>Customer Number:- asdsadasd</text>
</div>
<div class="col text-end">
<text class="fw-bold">Invoice No:- 1</text>
<br/>
<text class="fw-bold">Invoice Date:- 20/7/2022</text>
</div>
</div>
<div>
<table class="table table-striped table-hover mt-4">
<tr class="theme-background-color">
<th>#</th>
<th>HSN</th>
<th>Name</th>
<th>Quantity</th>
<th>Price/Unit</th>
<th>Discount</th>
<th>GST</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>Apple</td>
<td>10</td>
<td>₹ 100</td>
<td>₹ 100(10)</td>
<td class="text-wrap">₹ 45(GST%5)</td>
<td>₹ 945</td>
</tr>
<tfoot class="border-bottom border-dark ">
<tr>
<td colspan="3" class="fw-bold">Total</td>
<td colspan="3" class="fw-bold">10</td>
<td class="fw-bold">45</td>
<td class="fw-bold">945</td>
</tr>
</tfoot>
</table>
</div>
<div class="row mt-4">
<div class="col">
<table class="table table-striped">
<tr>
<td class="fw-bold text-muted">TERMS AND CONDITIONS</td>
</tr>
<tr>
<td class="fw-bold text-muted">Hello terms</td>
</tr>
</table>
</div>
<div class="col">
<table class="table">
<tbody>
<tr>
<td>Sub Total</td>
<td>₹ 1,000</td>
</tr>
<tr class="theme-background-color">
<td class="fw-bold">Total</td>
<td class="fw-bold">₹ 945</td>
</tr>
<tr>
<td>Received</td>
<td>₹ 400</td>
</tr>
<tr>
<td>Balance</td>
<td>₹ 545</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Java Code to generate PDF
public void generatePDF(FileOutputStream outputStream, String html) throws IOException {
PdfRendererBuilder pdfBuilder = new PdfRendererBuilder();
pdfBuilder.useFastMode();
pdfBuilder.withUri("path/to/pdf.file");
pdfBuilder.toStream(outputStream);
pdfBuilder.run();
// ITextRenderer renderer = new ITextRenderer();
// renderer.setDocumentFromString(html);
// renderer.layout();
// renderer.createPDF(outputStream, false);
// renderer.finishPDF();
}
Pom.xml
<dependency>
<groupId>org.xhtmlrenderer</groupId>
<artifactId>flying-saucer-pdf-openpdf</artifactId>
<version>9.1.22</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-core</artifactId>
<version>1.0.10</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.10</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-java2d</artifactId>
<version>1.0.10</version>
</dependency>
Lets say I am reading the table contents from database and printing the table rows. Sometimes I may have more than 5 rows data in the database sometimes I may have less than 5 rows data in the database.
What I want is when the table rows exceeds 5 rows it should take scrollbar, if it is less than 5 rows it should not take scrollbar.
I have gone through many websites where they fix the table body height and if the content exceeds that height it takes the scrollbar.
So I don't want table body height to be fixed because when there is less content in the table body it will take the fixed table body size it look odd. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
My table look like below image.
Scrollable tables aren't the most fun to play around with, so I've added a snippet that should get you moving along.
$(document).ready(function(){
if( $('#results tr').length >= 5 ) {
$('#myTable').addClass('add-scroll');
}
});
.add-scroll {
overflow-y: scroll;
height: 100px;
}
#results tr td {
width: 33%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<td>
<table width="100%" height="40">
<tr>
<th width="33%">Firstname</th>
<th width="33%">Lastname</th>
<th width="33%">Email</th>
</tr>
</table>
</td>
</tr>
</thead>
<tbody scrollbars="yes" class="dyn-height">
<tr>
<td>
<div id="myTable">
<table width="100%" id="results">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
</body>
You have to count the number of rows then add class when the rows are greater than 5.
$(document).ready(function(){
var rowCount = $('tbody tr').length;
if(rowCount > 5){
console.log(rowCount);
$('table').addClass('do-scroll');
}
});
.do-scroll{
width: 100%;
height: 220px;
display: -moz-grid;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
I want to put two bootstrap tables side by side like it is answered in this question:
Two side by side tables in bootstrap
Unfortunately I don't get the result mentioned there.
My Code looks like this:
<html>
<style>
body {background-color: black;}
</style>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<script type="text/javascript" src="webjars/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
And what I get looks like this:
Thanks in advance
Try Its :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
You have typo in your code. you need to replace
<div class="col-sx-6">
with
<div class="col-xs-6">
You've made a typo on both the columns.
You wrote col-sx-6 instead of col-xs-6. (column, show it like this on extra small screens and bigger, width of 6)
When using col-sx-6, it is just a div, which will be 100% wide.
Changing it to col-xs-6 will fix your problem.
Also, in bootstrap it is common to place your <div class="row"> inside a <div class="container">.
See: https://getbootstrap.com/docs/3.3/css/#overview-container
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Your code, using col-xs-6</h1>
<div class="row">
<div class="col-sx-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-sx-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
<h1>Corrected code using col-xs-6</h1>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
You should do something like below, for all resolutions:
col-lg-6 col-md-6 col-sm-6 col-xs-6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
If you want two tables(side by side) in mobiles screen and desktop screen, then - change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
And if you want two tables in desktop screen and not in mobile screen.
Change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
I cant seem to get this right, i made a divider through css divs and it shows on page but when in print the lines i made doesnt show..what other options should i do? im running out of ideas, what am i doing wrong how can i achieve this
here is what i want ot achieve
heres my css
heres the print preview
page code:
<div id="page-wrapper">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<p style="text-align:center;"><b>PROPERTY ACKNOWLEDGEMENT RECEIPT</b></p>
<p style="text-align:right;">Control No.</p>
<div class="row">
<div class="col-md-16">
<table class="table table-hover table-striped table-bordered table-condensed" class="">
<thead>
<tr>
<th style="text-align:center;">Quantity</th>
<th style="text-align:center;">Unit</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center;">Unit Value</th>
<th style="text-align:center;">Property No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>bucket</td>
<td style="font-size:12px;">oremloremloremloremloremloremloremloremloremlorem</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr style="background-color:black;"> NOTE:
<div style="height:2px;width:100%;background-color:black;"></div>
<div style="width:2px;height:100px;background-color:black;margin:0px auto;"></div>
</div>
</div>
</div>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
I want to put side-by-side two tables in the same grid-row but tables just stack over when run the code below:
<body>
...
<div class="container-fluid">
<div class="starter-template">
<div class='panel panel-primary'>
<div class='panel-heading'><h1>Main Title</h1></div>
<div class='panel-body'>
<div class='row-fluid'>
<h4>Title</h4>
<div class='span4'>
<table class='table table-bordered'>
<thead>
<tr><th>feat1</th><th>feat2</th></tr></thead>
<tbody>
<tr><td>132</td><td>value a</td></tr>
<tr><td>114</td><td>value b</td></tr>
</tbody>
</table>
</div><!--closes table1-->
<div class='span4'>
<table class='table table-bordered'>
<thead>
<tr><th>feat1</th><th>feat3</th></tr>
</thead>
<tbody>
<tr><td>264</td><td>val b</td></tr>
<tr><td>3</td><td>val c</td></tr>
</tbody>
</table>
</div><!--closes table2-->
</div>
</div><!--closes div panel-body-->
</div><!--closes div panel-->
</div> <!-- /.starter-template -->
</div><!-- /.container -->
...
</body>
The result is one table in all the row and then the second one below the first one.
Check out the fiddle
Use col-xs-6 if you still want to display the tables side by side when on smaller screens.
Use col-lg-6 if you want to display the tables on separate rows on smaller screens.
http://jsfiddle.net/DTcHh/1680/
<div class="row-fluid">
<div class="col-xs-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>One</th>
<th>One</th>
<th>One</th>
</tr>
<thead>
<tbody>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>One</th>
<th>One</th>
<th>One</th>
</tr>
<thead>
<tbody>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</table>
</div>
</div>
</div>