Dompdf make a blank page inside the generated pdf Document - dompdf

i have tried creating pdf files with dynamic content (generated with db data)
DomPdf was perfectly working with it.
but when i add some addtional section it breaks the content in the middle of div blocks.
So i added page-break-inside: avoid; then that problem solved.
now it makes a blank page after that div element in the pdf document !
Any Solutions? Thanks in advance !
Here is the Code within the php :
if(mysql_num_rows($get_options_query) > 0){// we have options available
$color2 = 'f9ebd4';
$quote_items .= '<div style="page-break-inside: avoid; width: 760px; height: auto;"><div style="width: 760px; height: auto; background-color: #f19221;padding:5px; ">Options:</div>';
while($get_options = mysql_fetch_array($get_options_query)){
$prod_opt_col_images='';
$all_prod_opt_col=$db->get_results("SELECT colour_name, colour_image
FROM prod_variations
JOIN prod_colours ON prod_variations.product_colour = prod_colours.colour_name
WHERE prod_variations.product_id ='".$item['product_id']."'");
if(count($all_prod_opt_col)>0){
$prod_opt_col_images='<br />'.'Available in:<br />';
foreach($all_prod_opt_col as $row_prod_opt_col ){
$prod_opt_col_images.='<img src="'.URL.'/images/colours/mat/'.$row_prod_opt_col->colour_image.'" width="25" height="25" alt="'.$row_prod_opt_col->colour_name.'" "/> ';
}
}
if($prod_opt_col_images!=''){
$prod_opt_col_images.='<br />';
}
$quote_items .= '<div class="options" style="background-color: #'.$color2.';">
<div class="divCell1"> '.$get_options['qp_prod_qty'].'</div>
<div class="divCell2"> '.str_replace("<br>","<br />",$get_options['qp_prod_name']).'<br />'.str_replace("<br>","<br />",$get_options['qp_prod_desc']).$prod_opt_col_images.'</div>
<div class="divCell3"> <img src="'.URL.'/images/products/'.$get_options['qp_prod_image'].'" width="75" height="75" alt="Quote Product" /></div>
<div class="divCell4"> $'.number_format($get_options['qp_prod_price'],2,'.',',').'</div>
<div class="divCell5"> </div>
</div></div>';
}
}

Related

Next js <Image/> component doesnt overflow while making carousel like regular <img> tag

when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}

Can't fill_in value because Capybara don't see popup

As I know, when popup/modal opens it is on the top of page where I opened it from, so when try to fill value in it don't see where it need to do that.
Then tried to look inside modal with within. Tried other classes, but same Capybara::ElementNotFound: Unable to find visible css "modal183"
within('modal183') do
fill_in 'ctl00_ContentPlaceHolder1_tbId', :with => '10'
end
Tried also find with xpath, but also nothing
Capybara::ElementNotFound: Unable to find visible xpath "//input[#id='ctl00_ContentPlaceHolder1_tbId']"
<div class="modal183">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
<span id="ctl00_ContentPlaceHolder1_lblTitle">text</span>
</div>
</div>
<div class="popup_Body">
<div class="popup_TextNoTop">
<span id="ctl00_ContentPlaceHolder1_lbl1" class="label-left">text</span>
<input name="ctl00$ContentPlaceHolder1$tbId" type="text" id="ctl00_ContentPlaceHolder1_tbId" class="txtInputDec width100" onFocus="ClearTheTextbox(this, '')" onBlur="FillTheTextbox(this, '')" onkeypress="return onlyNumbers()" />
<span id="ctl00_ContentPlaceHolder1_cmrvIB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
<span id="ctl00_ContentPlaceHolder1_revIB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text
</span></a></span>
<span id="ctl00_ContentPlaceHolder1_rvTb" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
<br />
<span id="ctl00_ContentPlaceHolder1_lbl2" class="label-left">text</span>
<input name="ctl00$ContentPlaceHolder1$tb1Id" type="text" id="ctl00_ContentPlaceHolder1_tb1Id" class="txtInputDec width100 top5" onFocus="ClearTheTextbox(this, '')" onBlur="FillTheTextbox(this, '')" onkeypress="return onlyNumbers()" />
<span id="ctl00_ContentPlaceHolder1_rev1IB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text
</span></a></span>
<span id="ctl00_ContentPlaceHolder1_rvTb1" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
</div>
</div>
<div class="popup_Buttons">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<a onclick="if (!window.event) {this.disabled=true; this.style.color='grey'; var but = document.getElementById('btnCancel'); but.disabled=true; but.style.color='grey';};" id="ctl00_ContentPlaceHolder1_btnOkay" class="cool-button width80 blue" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnOkay", "", true, "cons", "", false, true))">text</a>
</td>
<td align="right">
<a id="ctl00_ContentPlaceHolder1_btnCancel" class="cool-button width80 black" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$btnCancel','')">Atcelt</a>
</td>
</tr>
</table>
</div>
</div>
Updated: Attached part where it looks like be this popup which appear after I press on button. Inspect code shows on this code. I didn't wrote this code, but trying to build automated tests on them :)
<div id="popupparent" style="display: block; height: 1e+06px; left: 0px; top: 0px;">
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
var h = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var w = "innerWidth" in window ? window.innerWidth : document.documentElement.offsetWidth;
var doc;
if (obj.contentDocument) {
doc = obj.contentDocument;
} else if (obj.contentWindow) {
doc = obj.contentWindow.document;
} else {
return;
}
var childHeight = doc.body.scrollHeight;
var childWidth = doc.body.scrollWidth;
obj.style.height = childHeight + 'px';
var ver = getInternetExplorerVersion();
var parent = document.getElementById('termsofuse');
if (ver > -1) {
parent.style.marginTop = ((h - childHeight) / 2) - 64 + 'px';
} else {
parent.style.top = ((h - childHeight) / 2) - 64 + 'px';
}
parent.style.left = ((w - childWidth) / 2) + 'px';
parent.style.display = "block";
parent.style.visibility = "visible";
}
<div id="termsofuse" style="left: 1081px; top: 246.5px; display: block; visibility: visible;">
<iframe id="frameeditexpanse" frameborder="0" src="PopDailyCons.aspx?e=c0lEPUMwMDEwMDA3MDQmYUlEPUEwMDQ3ODIxNzAmZGF5PTImY3VyRGF0ZT0yMDE4LjA0JmN1clVzZXI9MTYwJnNvdXJjZT1hdGs=" scrolling="no" marginheight="0" marginwidth="0" class="termsOfUseFrame" style="height: 185px;"> </iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOk" value="Done" type="button">
<input id="btnCancel" value="Cancel" type="button" onclick="hideusertermwindow()">
Your within call doesn't work because you need to pass it a CSS selector. You're passing modal183 which would look for a <modal183> element, when what you really want is .modal183 to look for an element with the class modal183.
From your description it's tough to tell exactly what you're doing but it sounds like maybe you're talking about a popup window (new browser window) opened on top of the current tab. If that is the case then you'd need to swap windows in order to interact with it, along the lines of
new_win = window_opened_by do
# whatever action in the original window causes the popup window to open
click_button 'blah'
end
within_window(new_win) do
fill_in 'ctl00_ContentPlaceHolder1_tbId', :with => '10'
end

Laravel dom pdf image issue

I am using dompdf in laravel to create invoice. and it works fine for me until i use image in that.
Admin Controller
public function generateInvoice(Request $request)
{
$user = Auth::user();
$pdf = PDF::loadView('pdf.invoice', $user);
return $pdf->download('invoice.pdf');
}
And in Invoice View Page that contains the invoice template...
<style>
.block{
display: block;
}
.minifont12{
font-size: 12px;
}
.minifont10{
font-size: 10px;
}
.col-md-45{
width: 45%;
display: inline-block;
}
.col-md-30{
width: 30%;
display: inline-block;
}
.col-md-25{
width: 24%;
display: inline-block;
}
.bluecolor{
background-color: #C5C5EC;
}
.midtop{
margin-top: 50px;
}
</style>
<div class="header" style="position:relative; top:10; width:100%; ">
<img src="http://localhost:8000/img/minilogo.jpg">
<div style="text-align:center; margin-top:-20px;">Retail Invoice/Bill</div>
<div style="text-align:right">Invoice No. #BTR_PB_000052</div>
</div>
<div class="content">
<div class="minifont12 block" style="margin-top:20px;">
<strong>Sold By:</strong> SRM Smart Solutions Pvt. Ltd.<br>
<span class="minifont10">
Building No. 29, Third Floor, Central Market, West Punjabi Bagh, Delhi-110026
</span>
</div>
<hr>
<div class="col-md-45">
Order Id : BT121178273<br>
Order Date : 24-05-2016<br>
Invoice Date : 25-05-2016<br>
CIN No. : U72300DL2015PTC281652
</div>
<div class="col-md-30">
Avinash<br>
H.No 30-45-5/26, Chandigari colony east, rohit cottage lane, opp. krupa comlex lane, r.k.puram post, 500 056, hdy.<br>
Hyderabad, telangana - 500056<br>
8099473211
</div>
<div class="col-md-25">
<span class="midtop bluecolor">
*Keep this invoice for return and refund purposes
</span>
</div>
</div>
but When I run the code...it will show error message
Maximum execution time of 60 seconds exceeded
Please tell me what is the issue behind this..
I had the same issue when using a very large image. I solved the issue by changing the maximum execution time by adding this line before starting the pdf creation: ini_set('max_execution_time', 120);. You can also change this in your php.ini file if you like, just make sure you know what you're doing, as this setting applies to all scripts executed on your web server. You'll also have to restart your web server after making changes in the php.ini file.
Some other options so solve this are discussed here.
you can use this code :
<img src="{{ public_path("images/a.png") }}">
or can :
<div style="background: url({{ public_path("images/a.png"}})">text</div>

WordPress Featured Image Not In Div

I have a featured image for a Custom Post Type that I am trying to lay out in a div. For some reason the image is on the page but outside the div. This is my first time working with featured images and custom post types. What am I missing that is causing the image to appear on the page before the div even starts?
if ($loop->have_posts()) {
$output = '<div class="stories">';
while($loop->have_posts()){
$loop->the_post();
$meta = get_post_meta(get_the_id());
$output .= '
<div class="story" style="float: left; display: block; border: 1px solid #CCC;">
<a href="' . get_permalink() . '">
' . get_the_title() . '</a>
' . the_post_thumbnail("medium") . '
' . get_the_excerpt() . '
</div>
';
}
$output .= "</div>";
} else {
$output = 'No Stories Added Yet.';
}
return $output;
When I view the HTML output this is what is rendered:
<div class="row-fluid ">
<img class="attachment-medium wp-post-image" width="300" height="195" alt="13755721_m" src="http://code2media.net/wp-content/uploads/2013/04/13755721_m-300x195.jpg">
<img class="attachment-medium wp-post-image" width="300" height="240" alt="African-Boy" src="http://code2media.net/wp-content/uploads/2013/05/Snotty-African-Boy-300x240.jpg">
<div class="stories">
<div class="story" style="flost: left; display: block; border: 1px solid #CCC;">
Story 2
Test Content
</div>
<div class="story" style="flost: left; display: block; border: 1px solid #CCC;">
Test Content
</div>
the_post_thumbnail("medium") is echoing the image thumbnail immediately when it is called, outside your other HTML as it is still being constructed, and appending an empty return value to your string. If you want the method to return the result to append to your string (you do), then you need to use get_the_post_thumbnail($post->ID, "medium")
Generally speaking, WordPress methods that start with the_ will echo the result, and methods that start with get_ will return the value.
the_post_thumbnail("medium") will return with img tag. you can get just featured image src and use as as want.
Take a look the this

jquery ajax form submit plugin not posting file input

I've got this form:
<form id="imageinputpopup" class=suggestionsubmit style="display: none">
<span>Add a thing!</span><br/>
<label>url: </label><input name="imageurl" type="url"><br/>
<label>file: </label><input name="imagefile" type="file"><br/>
<input type='hidden' name='schoolid' class="schoolid">
<input type="submit" value="Submit">
</form>
And this document.ready:
<script type="text/javascript">
$(document).ready(function() {
$('.schoolid').val(get_gmap_value('school_id'));
$(".allow-submission").live('click', function(){
if($(this).attr('inputtype')=="colorpicker"){
.....
} else if($(this).attr('inputtype')=="image"){
remove_hidden("#imageinputpopup");
add_fieldname($(this), $("#imageinputpopup"));
$("#imageinputpopup").dialog();
} else if($(this).attr('inputtype')=="text"){
....
} else {
//nothing
}
});
$(".suggestionsubmit").submit(function(){
event.preventDefault();
alert($(this).html());
$(this).ajaxSubmit({
url: '/save-school-suggestion/',
type: 'post',
success: function(response){
response = jQuery.parseJSON(response);
// Check for login redirect.
// if ( response.requireLogin ) {
// alert('Sign up or log in to save your answer');
// } else {
$('.suggestionsubmit').dialog('close');
// }
}
});
});
});
function add_fieldname(element, addto){
var elementname = document.createElement('input');
elementname.type = 'hidden';
elementname.name = 'fieldname';
elementname.value = element.attr('fieldname').replace(' ', '_');
$(elementname).addClass('fieldname');
addto.append(elementname);
}
function remove_hidden(element){
$(element+' .fieldname').remove();
}
But the file field isn't showing up server side.
Why?
I found this in the documentation:
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.
But I don't understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly...
EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).
<form id="photos-submission-form6">
<input type="hidden" name="section" value="photos">
<input type="hidden" name="school" id="photos-submit-school6">
<div style="margin-bottom: .5em">
<p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
<img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
<div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
</div>
<div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
<input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
<span style="line-height: 40px;">
<label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
<label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
<label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
</span>
<div style="height: 30px; margin-top: 1em; width: 413px;">
<label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
<input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
<button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
</div>
</form>
This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?
Also, definitely not an issue but it is recommended to close your input tags, now like this:
<input ... />
Add enctype="multipart/form-data" attribute to your form.
Try to change the type of the input imageurl from url to text:
FROM:
<label>url: </label><input name="imageurl" type="url"><br/>
TO:
<label>url: </label><input name="imageurl" type="text"><br/>
I am not sure, but maybe the jquery plugin fails serializing the form due to invalid type attribute of image_url.
Hey you just forgot to add ---> enctype="multipart/form-data" in the form tag. This will help you out.
I think you have a problem with the binding in javascript not recognising your file.
Try binding your submit trigger event with another live() function
i.e. change
$(".suggestionsubmit").submit(mooFar(e));
to
$(".suggestionsubmit").live('submit', mooFar(e));
...........I was looking in the wrong place in the request for the file.
Server side should have been:
if not s.url_field and 'imagefile' in request.FILES:
s.image_field = request.FILES['imagefile']
instead of
s.image_field = request.POST.get('imagefile', None)
Complete and utter fail on my part.
Make sure the files you're testing aren't outside the max file size, it would be worth setting this in your HTML.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
Also, testing without the display:none might be worth while until you have the form working; which browser are you testing in?

Resources