printing in CSS second page - html

I keep on searching about this but i didn't find an answer..
I want to print my website page, so i used the margin-top and margin-bottom but it only affected the first sheet.. In the second page, there is no margin on top.. is there a way to do this..
Here is the sample image i am talking about.
Here is the code that I am using. Please help.
<style type="text/css">
.printOnly {
margin-top: 75px;
display: none;
page-break-inside: avoid;
}
.textSummaryTable { page-break-inside:avoid;}
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable { page-break-inside: avoid; }
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5; }
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly {
display: block;
}
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{
border:1px solid gray;
page-break-inside: avoid;
}
.textSummaryTable td{
border:1px solid gray;
page-break-inside: avoid;
}
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title {
display: none;
}
#line-break {
display: block;
}
.textSummaryTable {
width: 100%;
}
}
#media screen {
#line-break {
display: none;
}
}
</style>
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php
$participants = $modelE->evaluationDetails;
?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Related

CSS issue with div wrapping another

I have a problem that I cannot manage to wrap my section properly.
I have a div "container" that with a php part is populated by few divs and I don't know how to properly wrap it with the border:solid of my created div.
html/php part
<div class = "listaCarrello" id ="listaCarrello "style="display: <?php echo !isset($_GET['riepilogo'])&&isset($_SESSION['username'])? "block":"none"?>">
<?php
$isEmpty = true;
foreach ($_COOKIE as $key => $val) {
$query = $connection->query("SELECT * FROM prodotto WHERE IDProdotto = $key");
if ($query != null) {
$isEmpty = false;
$row = $query->fetch_assoc();
echo "<div class = \"elemCarrello\">";
echo "<p class=\"nomeCarrello\">" . $row['nomeProdotto'] . "</p>";
echo "<div class = \"imgCarrello\">";
echo "<img src = \"img/" . $row['immagine'] . "\" alt=\"" . $row['nomeProdotto'] . "\"height=\"150px\" width=\"150px\">";
echo "</div>";
echo "<div class=\"prezzoCarrello\">";
echo "<p>Prezzo unitario " . $row['prezzo'] . "</p>";
echo "<p> Quantità: " . $val;
echo " - Prezzo totale: ";
echo "€" . $row['prezzo'] * $val . "</p>";
$totale = $totale + ($row['prezzo'] * $val);
echo "<p> Modifica la Quantità: ";
echo "<input type='number' id = 'quantita' name='quantita' value='" . $val . "'>";
echo "<button onclick='refreshCookie($key, document.getElementById(\"quantita\").value)'>AGGIORNA</button>";
echo "</div>";
echo "<button class='eliminaCarrello' onclick='eliminaCookie($key)' style='background: white'> <img src='img/elimina.png' height='50' width='50'> </button>";
echo "</div>";
}
}
?>
</div>
<?php
if (!$isEmpty) {
echo "<div class='checkOut'>";
echo "<p>Totale: €" . $totale . "</p>";
echo '<button id="2ndphase" onclick="goToAddress()">AVANTI</button>';
echo "</div>";
}
?>
css part
.listaCarrello{
border:solid;
border-color: lightgray;
border-radius: 10px;
text-align: center;
margin-top: 5px;
width: 99%;
margin-bottom: 5px;
padding-bottom: 50px;
}
.elemCarrello{
margin-top: 5px;
width: 99%;
text-align: left;
float:left;
display: block;
margin-bottom: 5px;
border: solid;
margin-left: 5px;
border-radius: 10px;
}
.nomeCarrello{
padding-left: 10px;
font-weight: bold;
}
.imgCarrello{
float: left;
padding-left: 10px;
}
.eliminaCarrello{
margin-top: -13px;
margin-bottom: 10px;
}
Sorry for my English and I hope that you understood what I am saying.
I have attached a image as an example
Set the "container" divs overflow styling to auto.
container{
overflow:auto;
}

HTML2PDF row table cannot page-break

I used HTML2PDF version 4.03 for export data to PDF, my problem is when the data format on table rows (tr) always not break to next-page and if content more than height page the content out of tr table.
I have tried this page break trick, but still does not work, please give me solutions.
Screenshots of the problem:
Here is my CSS:
body {width:100%;height:auto; }
hr {border-width:0.3px; border-color:#000; margin:8px 0;}
h1, h2, h3 {margin:0 0 0 0;}
h1 {text-transform: uppercase;}
h2 {font-size:20px;text-transform: uppercase;}
h3 {font-size:16px;}
div {font-size:15px;height:auto;}
p {margin:7px 0;}
.mb0 {margin-bottom:0px!important;}
.mb20 {margin-bottom:20px!important;}
.mt0 {margin-top:0px!important;}
.centered {
text-align:center;
}
.header {
text-align: center;
}
.header h1 {font-size:25px;}
.w40 {
float:left;
width:38%;
margin-left:2%;
margin:10px 0;
display:inline;
position:relative;
}
.w60 {
float:left;
width:58%;
margin-right:2%;
margin:10px 0;
display:inline;
position:relative;
}
.w100 {
float:left;
width:100%;
display:inline;
position:relative;
}
.logo {
width:75%;
padding:2px;
}
table td {
padding:3px 0;
}
.clearfix {
clear:both;
margin:0;
}
.sk h3{
margin-bottom:5px;
text-transform: uppercase;
}
label {
margin:0px 0 50px;
font-size:14px;
text-align: right;
font-weight: bold;
}
.tgl-sah {
position:absolute;left:77px;top:-5px;font-size:13px;color:#143754;font-weight:bold;
}
.w530 {
width:530px;
text-align: justify;
}
.sub-h3 {margin:7px 0;}
And here is HTML
<table class="tb-partai" cellspacing="0">
<tr>
<th>No.</th>
<th style="border-left:none;width:250px">partai Politik</th>
<th style="border-left:none;width:170px;">Struktur<br/>Kepengurusan</th>
<th style="border-left:none;width:170px">Kantor Pusat</th>
<th style="border-left:none;width:235px">Riwayat Permohonan</th>
</tr>
<?php
$no = 0;
foreach($partai->result_array() as $p) {
$no = $no + 1;
if($no % 2 == 1) {
echo "<tr style='background:#FFF'>";
} else {
echo "<tr style='background:#EFF1FF'>";
}
$sk_last = $this->db->select('*');
$sk_last = $this->db->order_by('id','desc');
$sk_last = $this->db->limit(1);
$sk_last = $this->db->get_where('rz_riwayat_parpol', array('id_parpol'=>$p['id']));
foreach($sk_last->result_array() as $sk) { ?>
<td class="t-center"><?php echo $no; ?>.</td>
<td style="border-left:none;width:265px">
<table>
<tr>
<td style="width:125px;"><img src="<?php echo base_url().'uploads/'.$sk['logo']; ?>"></td>
<td style="padding-left:5px;">
<?php echo "<h2>".$sk['nama_parpol']."</h2>";
echo "<p style='margin:3px 0'>".$sk['alias_parpol']."</p>";?>
<p style="margin:3px 0">Didirikan : <?php echo dateIndo(GetValue('rz_parpol',$sk['id_parpol'],'tgl_didirikan'));?></p>
<?php if($sk['status'] == "Berbadan Hukum") { ?>
<div style="width:165px;position:relative">
<img src="<?php echo base_url().'assets/images/bg-badanhukum.png'; ?>">
<span class="bdn-hukum" style="margin-left:45px"><?php echo dateIndo($sk['tgl_disahkan']);?></span>
</div>
<?php } ?>
</td>
</tr>
</table>
</td>
<td style="border-left:none;max-width:170px">
<table>
<tr>
<td>Ketua Umum</td><td> : </td><td><?php echo $sk['ketum']; ?></td></tr>
<tr>
<td>Sek. Jenderal</td><td> : </td><td><?php echo $sk['sekjend']; ?></td></tr>
<tr>
<td>Bend. Umum</td><td> : </td><td><?php echo $sk['bendum']; ?></td></tr>
<tr>
<td>Ketua MA</td><td> : </td><td style="width:90px;"><?php echo $sk['ketua_ma']; ?></td></tr>
<tr>
<td>Anggota MA</td><td> : </td><td></td></tr>
<tr>
<td colspan="3" style="width:185px"><table><?php echo anggota_ma($sk['anggota_ma'])."</table>"; ?></td></tr>
</table>
</td>
<td style="border-left:none;width:170px"><?php echo $sk['kantor_pusat']; ?></td>
<?php } ?>
<td style="border-left:none;width:350px;text-align:justify">
<?php $sk_partai = $this->db->get_where('rz_riwayat_parpol', array('id_parpol'=>$p['id']));
$nomor = 0;
foreach($sk_partai->result_array() as $skp) {
$nomor = $nomor + 1;
echo "<table>
<tr><td style='width:15px;padding-bottom:8px;'>".$nomor.".</td><td style='width:335px;padding-bottom:8px;line-height:20px'>
<b>".getValue('rz_srt_masuk', $skp['id_srt_permohonan'], 'no_kendali')."</b> - <span style='color:#323B7E;'>".dateIndo(getValue('rz_srt_masuk', $skp['id_srt_permohonan'], 'tgl_srt'))."</span> <br/>".getValue('rz_srt_masuk', $skp['id_srt_permohonan'], 'perihal')."</td></tr></table>";
} ?>
</td>
</tr>
<?php } ?>
</table>
Thanks

How can I wrap this text so it doesn't overflow past the widget container?

I have a Wordpress widget and inside the widget I am displaying profile information. Some times the text for the 2nd row is too long and it overflows past the widget container.
What would be a good way to deal with this, and how could I implement it in css or html or whatever?
My css
#profileContainer {
float: left;
position: relative;
width: 400px;
display:block;
padding: 5px;
}
#avatarContainer {
width: 55px;
float: left;
padding: 5 5 5 5;
}
#dataContainer {
float: left;
vertical-align: text-top;
word-wrap: break-word;
}
#dataList {
display: inline-block;
}
My html for the output
?>
<div id="profileContainer">
<?php
$img = bp_core_fetch_avatar( 'html=false&item_id=' . $author->getId() );
$img_html = '<img src="' . $img . '"></img>';
?>
<div id="avatarContainer">
<?php
if ($author->getUrl() != null) {
echo "<a href='" . $author->getUrl() . "'>" . $img_html . "</a>";
} else {
echo $img_html;
}
?>
</div> <!--closing avatar container div -->
<div class="overflow-hidden">
<?php
if ($author->getName() != null) {
echo "<b>" . $author->getName() . "</b>";
}
if ($author->getJobTitle() != null) {
echo "<br/>" . $author->getJobTitle();
}
if ($author->getUserName() != null) {
if ($author->getUrl() != null) {
echo "<br/><a href='" . $author->getUrl() . "'>#" . $author->getUserName() . "</a>";
} else {
echo "<br/>#" . $author->getUserName();
}
}
if ($author->getEmail() != null) {
echo '<br/>' . $author->getEmail() . "";
}
if ($author->getPhone() != null) {
echo "<br/> " . $author->getPhone();
}
echo "<br/>";
?>
</div> <!--closing data container div -->
</div> <!--closing container div-->
<?php
in css do this to wrap text in elipsis mode (three dots)
.overflow-hidden{
max-width:400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Inconsistent CSS Table displaying (Using SQL & PHP)

I've run into the problem that when I echo information Into a table using PHP and HTML from the database the information moves depending on how it loads.
By this I mean if I constantly refresh everything will be different to how it previously was. I mean how it is displayed not what is displayed.
.tracklist {
}
.tracklist img {
max-width:15%;
max-height:15%;
}
.tracklist td{
width:36%;
display:block;
padding:1%;
text-align:center;
}
#content {
width:98%;
height:73%;
padding-left:1%;
padding-right:1%;
background-color:#d8d8d8;
text-align:center;
}
#contentbox {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align:center;
background-color:#999999;
}
<div id="content">
<div id="contentbox">
<br />
<table class="tracklist">
<?php
$i = 0; $trEnd = 0;
while ($row = mysql_fetch_array($result)){
if($i == 0){
echo '<tr>';
}
echo '<td>';
echo $row["genre"]." | ".$row["artist"]." | ".$row["name"];
echo '<br />';
echo "<img src=".$row["image"].' />';
echo '</td>';
if($i == 2){
$i = 0; $trEnd = 1;
}else{
$trEnd = 0; $i++;
}
if($trEnd == 1) {
echo '</tr>';
}
}
if($trEnd == 0) echo '</tr>';
?>
</table>
</div>
</div>
The data from the database is called in the header just so people know that it is called.
Fixed this by putting width:100%; in the class which it inherited the height from.
Seems to of fixed it for now.

My sidebar Floating at bottom

In my custom template file, which i made for youtube videos-creating problem with my sidebar, it is showing the sidebar at bottom, below is the code i am using..
Can anyone help me, it should stick at right, as it..
<?php
/**
Template Name: gallery
*/
get_header();
?>
<style>
/* some basic styling */
h1 {font-size:20px; line-height:95%;}
#galvidcontainer {
width:1100px;
margin-left:50px;
height:1250px;
}
.galvidpre {
width:300px;
height:300px;
float:left;
margin:5px;
background-color:#00A0DA;
}
.galvidprevid {
width:300px;
}
.galvidpretext {
width:280px;
padding-top:2px;
margin-top:2px;
}
</style>
<div id="galvidcontainer">
<h1>Videos</h1>
<?php /* Loop the stuff from the videos post type */
$args = array( 'post_type' => 'videos', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="galvidpre">
<div class="galvidprevid">
<?php
/* Set variables and create if stament */
$videosite = get_post_meta($post->ID, 'Video Site', single);
$videoid = get_post_meta($post->ID, "Video ID", single);
if ($videosite == vimeo) {
echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
} else if ($videosite == youtube) {
echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>';
} else {
echo 'Please Select Video Site Via the CMS';
}
?>
</div>
<div class="galvidpretext">
<h1><?php the_title() ?></h1>
<p>
<?php /* this is just a limit on characters displayed */
$words = explode(" ",strip_tags(get_the_content()));
$content = implode(" ",array_splice($words,0,20));
echo $content; ?>
</p>
</div>
</div>
<?php endwhile;?>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
The thing happening with the sidebar>>http://i.imgur.com/wm82twJ.png
Looks like you have to clear the floats. Use clearfix or clear:both
<div id="container" class="clearfix"></div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}