Pieces missing when printing more than first page is printed - html

I have a program that allows the user to print out all of the pages of a report. So far so good, except that when they are printing page 2 - the end, or even a page other than the first, there is a section that is missing. When the pages show on the screen all the information is there, just not when it is finally printed. The pages are generated through a while loop in php, here is a sample of the code that shows the html:
<div id="page">
<div id="topper">
Book Condition:
<?php echo $cond;?>
Enter the PO that you would like to review: <?php echo $po;?><span id="record">Record <?php echo $x;?> of <?php echo $pages;?></span>
</div>
<div id="result">
<div class="width border cl">
CL <?php echo $cl;?>
</div>
<div id="recv" class="width border">
REC: <?php echo $qty;?>
</div>
<div id="pricePd" class="width border">
COST: <?php echo $paid;?>
</div>
<div id="words">
<div class="border old">Guide - Old</div>
<div class="border mid">Qty Rem: <?php echo $qtyRem;?></div>
<div class="border current">Guide - Current</div>
</div><!--WORDS-->
<div id="box" class="border">
<input value="<?php echo $title;?>" style="width: 200px;" placeholder="Title"/><br>
<input value="<?php echo $isbn10;?>" style="width: 200px;" placeholder="ISBN10"/><br>
<input id="isbn" value="<?php echo $isbn;?>" style="width: 200px;" placeholder="ISBN13" /><br>
</div><!--BOX-->
<div id="code" class="border">
<div id="barcode" >
<?php
echo '<img src="isbn/' .$isbn.'.jpg" width="200px;"height="100px;">';
?>
</div>
it is everything in the div with the id of "box" that does not print, except on the very first page.This only seems to happen in Firefox, when I print in chrome, all the info is there.
Can anyone shed some light on this for me?

Related

giving two background colors for html with css not working

i have a form to be displayed in HTML format, the form HTML code is like below:
<form action="<?php echo base_url('editAllProductsAction'); ?>" method="post">
<?php foreach($products as $key=>$val){ ?>
<div class="row">
<h5></h5>
<input type="hidden" value="<?php echo $val['id']; ?>" name="id[]" />
<div class="col-lg-3">
<label>Product Name</label>
<input name="product_name[]" value="<?php echo $val['product_name']; ?>" type="text" class="form-control" />
</div>
<div class="col-lg-3">
<label>Min Qty </label>
<select name="min_qty[]" class="form-control">
<?php for($i=1;$i<50;$i++){ ?>
<option <?php if($i==$val[ 'min_qty']) echo 'selected'; ?> value="
<?php echo $i; ?>">
<?php echo $i; ?>
</option>
<?php }?>
</select>
</div>
<div class="col-lg-3">
<label>Purchase Price </label>
<input name="purchase_price[]" value="<?php echo $val['purchase_price']; ?>" type="number" data-id="<?php echo $val['id']; ?>" class="form-control edit_purchase_price" />
</div>
<div class="col-lg-3">
<label>Nosh Price </label>
<input name="nosh_price[]" value="<?php echo $val['nosh_price']; ?>" type="number" class="form-control edit_nosh_price_<?php echo $val['id']; ?>" />
</div>
</div>
<?php } ?>
<button type="submit" class="btn btn-primary right_side">Submit</button>
</form>
as you can see I have used php to display the values in the form, when I am displaying the form, because all the row is having same white color as background like below, which is awkward:
I am trying to give 2 background colors for the form, like in first row all input background color will display one color, the second row all the input background will show different colors and it continues for each row. i did the following css:
.form-control:nth-child(2n+1) {
background-color: grey;
}
but this is not displaying the color, can anyone tell me what I did wrong here. thanks in advance
:nth-child(2n+1) part of your code will work for form-control class living on the same level as siblings. There is no other form-control class as sibling on the same level. They live inside different column. That's why 2n+1 cannot find the third form-control inside it's own level. So, basically you have to target the class col-lg-3 as the :nth-child(2n+1). Like so should work-
.col-lg-3:nth-child(2n+1) {
background-color: grey;
}
That way you are selecting every other column and then the eventual form-control class if you want to style them differently per column basis.
You can visually see it here- https://css-tricks.com/examples/nth-child-tester/
Edit:
With further clarification, here is the code that should work in this case and the above explanations stands with a little bit of selector change-
.row:nth-child(2n+1) .form-control {
background-color: #000;
}
You have to give the class row instead of form-control
.row:nth-child(2n+1){
background: grey;
}

Adapting borders for a select2 when there is too much options

A picture says more than long explainations, here's my probleme :
As you can see in the pic, when too many options are selected with the select2 modal, it goes out of borders and give this ugly displaying.
Here is the source code of the select2 :
<div class="form-group row">
<label class="col-sm-3 text-right control-label col-form-label">Liste des metiers</label>
<div class="col-sm-9">
<select class="select2 form-control" multiple="multiple" style="height: 36px;width: 100%;" id="metiers">
<?php foreach ($metiers as $metier) { ?>
<option value="<?php echo $metier['nom_metier'] ?>" <?php if (isset($entreprise_metiers[$metier['nom_metier']])) echo ('selected') ?>><?php echo $metier['nom_metier'] ?></option>
<?php } ?>
</select>
</div>
So, if you guys have a solution for this, I'll gratefully take it

Bootstrap Style broken with autocomplete widget

I am working in a project with codeigniter and bootstrap, I made an autocomplete system, but the css looks broken like this
https://gyazo.com/4af7ae2bbdfd5547233d192b80ef947e
There is no custom style, only the bootstrap min css, here is my view html code, any help to look like it should be would be appreciated
<h2>Welcome to Crossover Laboratory</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class='col-md-10 text-center'>
<h3>Patients</h3>
<?php echo $error2; ?>
<?php
$attributes2 = array(
"class"=>"form-horizontal",
"id" => "LoginForm2",
"name" => "LoginForm2",
"method" => "post"
);
echo form_open("laboratory/patients", $attributes2); ?>
<div class="form-group">
<input type="text" name="username_patients" id="username_patients" class="ui-autocomplete-input" value="" required placeholder="Name" />
<p id="patient_name"></p>
</div>
<div class="form-group">
<input type="password" name="password_patients" id="password_patients" value="" required placeholder="Code"/>
</div>
<div class="form-group">
<?php echo form_submit("Login2","Login"); ?>
</div>
<?php echo form_close(); ?>
</div>
<div class="col-md-1">
</div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$("#username_patients").autocomplete({
source: '<?php echo site_url('laboratory/autocomplete'); ?>',
minlenght: 2,
html: true,
open: function(event, ui)
{
$(".ui-autocomplete").css("z-index",1000);
}
});
});
</script>
I think you have missed the jQueryUI CSS references. Add the below CSS in your application <head> section and try..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

I want to make the background image of joomla login be full width

I have custimized the css of my joomla login page, everything is perfect, but I would like the image that I have inserted in the background through css to scale to whole width. Right now it is of a certain width size, despite the fact that in my css I have added width:100%.
Here is the login code:
<?php
/**
* #package Joomla.Site
* #subpackage com_users
* #copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* #license GNU General Public License version 2 or later; see LICENSE.txt
* #since 1.5
*/
defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
?>
<div class="login<?php echo $this->pageclass_sfx?>">
<?php //if ($this->params->get('show_page_heading')) : ?>
<div class="page-header">
<h1 class="title">
<?php echo $this->escape($this->params->get('page_heading')); ?>
</h1>
</div>
<?php //endif; ?>
<?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
<div class="login-description">
<?php endif ; ?>
<?php if (($this->params->get('login_image')!='')) :?>
<img src="<?php echo $this->escape($this->params->get('login_image')); ?>" class="login-image" alt="<?php echo JTEXT::_('COM_USER_LOGIN_IMAGE_ALT')?>"/>
<?php endif; ?>
<?php if($this->params->get('logindescription_show') == 1) : ?>
<?php echo $this->params->get('login_description'); ?>
<?php endif; ?>
<?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
</div>
<?php endif ; ?>
<form class="form-horizontal" action="<?php echo JRoute::_('index.php?option=com_users&task=user.login'); ?>" method="post">
<fieldset class="well">
<?php foreach ($this->form->getFieldset('credentials') as $field): ?>
<?php if (!$field->hidden): ?>
<div class="control-group">
<div class="control-label">
<?php echo $field->label; ?>
</div>
<div class="controls">
<?php echo $field->input; ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<div class="control-group">
<label id="remember-lbl" class="control-label" for="remember"><?php echo JText::_('JGLOBAL_REMEMBER_ME') ?></label>
<input id="remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="<?php echo JText::_('JGLOBAL_REMEMBER_ME') ?>" />
</div>
<?php endif; ?>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn-send"><?php echo JText::_('JLOGIN'); ?></button>
<input type="hidden" name="return" value="<?php echo base64_encode($this->params->get('login_redirect_url', $this->form->getValue('return'))); ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
</div>
</fieldset>
</form>
</div>
<div class="other-link">
<ul class="yt-list type-square">
<li class="pull-left">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<?php echo JText::_('COM_USERS_LOGIN_RESET'); ?></a>
</li>
<?php
$usersConfig = JComponentHelper::getParams('com_users');
if ($usersConfig->get('allowUserRegistration')) : ?>
<li class="pull-right">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
<?php echo JText::_('COM_USERS_LOGIN_REGISTER'); ?></a>
</li>
<?php endif; ?>
</ul>
</div>
Don't modify core Joomla files, learn about overrides (1, 2 & 3) and use them, that way when a security update is released you can apply it safely and not have to worry about your changes being overwritten.
Did you mean backgroud-size: 100% rather than width: 100%? That would make more sense for background images. In that case, I would recommend reading this primer on "Scaling background images"
To help further we will need to see your existing CSS that you've created and either a link showing the problem or a good screen shot of the issue.

Form inputs disabled

I have two forms on my page, I wrapped the first with a new class just to restrict it to span5, and from that the forms now appear next to each other horizontally but the first is not allowing you to click into or on the elements at all.
<div class="row">
<div class="greybg-container">
<div class="span5">
<div id="login-container">
<div class="inner-content">
<h4>Login</h4>
<div class="basket-login"><div class="basket-login-text"><?php $seintro = new Page($db,'SiteElements','Login'); echo $seintro->row['pageCopy']; ?></div>
<form method="post" action="<?php echo HTTP_HOST; ?>Site/MyAccount/Login/?basketId=<?php echo $_REQUEST['basketId'] ? $_REQUEST['basketId'] : $basket->row['orderId']; ?>&wishlist=<?php echo $_GET['wishlist']; ?>&categoryId=<?php echo $_GET['categoryId']; ?>&addToBasketSize=<?php echo $_GET['addToBasketSize']; ?>">
<?php if ($errorLogin){ ?>
<span class="error"><?php echo $errorLogin; ?></span>
<?php } ?>
<table class="basket">
<?php foreach($form_login as $each){ ?>
<tr><td class="title"><?php $each->writeLabel(); ?></td>
<td><?php $each->write(); ?></td></tr>
<?php } ?>
<tr>
<td class="title">
<label for="login_userSubmit"></label>
</td>
<td class="form_button">
<input id="login_userSubmit" type="submit" size="" value="Send" onclick="" name="login_userSubmit">
<br>
<a class="grey-link" href="<?php echo HTTP_HOST; ?>Site/MyAccount/ForgotPassword">Forgot Password ?</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<div id="left">
<div class="inner-content">
<h4>Register</h4>
<div class="basket-login"><div class="basket-login-text"><?php $seintro = new Page($db,'SiteElements','Register'); echo $seintro->row['pageCopy']; ?><?php echo $page->row['pageCopy']; ?></div></div>
<form method="post" enctype="multipart/form-data">
<?php if (is_array($error)){ ?>
<strong>Please Note :</strong> The following errors have occurred
<ul>
<?php foreach($error as $id=>$each){ ?>
<li class="error"><?php $form_signup[$id]->writeLabel($each); ?></li>
<?php } ?>
</ul>
<?php } ?>
<table class="basket">
<?php if($form_signup){ foreach($form_signup as $each){ ?>
<tr>
<td class="title"><?php $each->writeLabel(); ?></td>
<td><?php $each->write(); ?></td>
<?php } } ?>
<tr>
<td class="title">
<label for="signup_submit"></label>
</td>
<td class="form_button">
<input style="width:auto;" id="signup_submit" type="submit" size="" value="Continue Registration" onclick="document.getElementById('action_submit').value='1';document.submit();" name="signup_submit">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
the second form starts where there is div id="left". ignore the fact it says left, that's the form on the right as you'll see.
http://bit.ly/19fegdi
Span5 is overlapped by the form which on the right side. Add the following css style will fix it.
#left{
float: left;
}