I need to print invoice with unknown number of items, and at the end of the invoice there is terms and conditions that is also - unknown number of lines.
So i have something similar to this:
<body>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
<div class="termsAndConditions"></div>
</div>
</body>
So now the page has a background image, that contains the identity of the company, and at the top there is logo. In the div of marginTop I am skipping number of lines so there is nothing to be printed their.
So in invoice content I always have it in the right place.
Now the terms and conditions comes as a variable that holds a text of html, the user will type it and i will read it and show it here.
What I want, that if the customer entered long term and conditions I want to break it into pages. But the thing is I cannot break it because i don't know where to break exactly, as it can be any thing especially if it contains html code. And I want when it got printed out the top margin should be always their.
Can anyone give me any clues?
I can only use simple JavaScript, I cannot use jQuery, and I cannot get the height of the content after page load, any JavaScript should be used while rendering. I have tried to do that but it did not work.
Related
Here in the demo shown http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview i'm facing two issues which can be resolved using simple css/bootstrap code.
Below are the issues i am facing.
1) I am trying to show the content on the right side when user click any option present on the left hand side. Right now when user click on any link(OS packages,Option Two), the content is displayed in the down to the options listed ass hown in the plnkr demo. Any suggestions how to show the content on the right hand side when user click on any of the option.
2)And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
html code:
<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div ng-controller="MainCtrl">
<div class="workspace">
<div class="sidebar-wrap">
<h3>Click below options:</h3>
<div class="sidebar-contents">
<a class="nav clearfix"
ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
ng-class="{ 'active' : showOsPackages }">
OS Packages
</a>
<p>
<a class="nav clearfix"
ng-click="optionTwo=!optionTwo; showOsPackages=false"
ng-class="{ 'active' : optionTwo }">
Option Two
</a>
</p>
</div>
</div>
<div class="" ng-show="showOsPackages">
<h1>OS Packages</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
<div class="" ng-show="optionTwo">
<h1>Option Two</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
</div>
</div>
</div>
</div>
js code:
var app = angular.module('plunker', ["ngAnimate"]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'slideout steeze';
});
Any suggestions would be helpful.
I checked your code. Here are the corrections.
I am trying to show the content on the right side when user click any
option present on the left hand side. Right now when user click on
any link(OS packages,Option Two), the content is displayed in the
down to the options listed ass hown in the plnkr demo. Any
suggestions how to show the content on the right hand side when user
click on any of the option.
Firstly I wrapped your content in a wrapper div with a class contents-wrap then the sidebar-wrapper and contents-wrap can be set to 30% and 70% respectively, so that we get the desired result.
CSS:
.contents-wrap{
display:inline-block;
width:70%;
float:left;
}
.sidebar-wrap{
display:inline-block;
width:30%;
float:left;
}
And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
For this I suggest setting the respective variable to just true, instead of toggling the input.
Plunkr Demo
But here is a even better version, where you only use one variable toggle and you set the selected tab name to the toggle variable, using this method, the number of variables needed to be defined is reduced.
Plunkr Demo
I'm working on a project using React and Bootstrap. I have one big bar graph and 2 little boxes that all need to sit horizontally together.
Here's how it should work.. expand the pen window to see them sit horizontally together (the correct way):
https://codesandbox.io/s/lO9rvrBYM
However I need some conditional rendering logic in there in case there is no data and I don't want to display the big bar graph. Check that out here:
https://codesandbox.io/s/ELLzLo3g
In the example with conditional rendering it can no longer properly position the elements. They sit permanently on top of one another.
I think it has to do with line 69. I need to render that graph with one less closing </div> to keep the horizontal layout in tact, but that throws a syntax error.
Anyone great at Bootstrap have any tips to solve this?
First of all, your question & samples are not that clear on what you want to achieve, so my answer might be missing the point :)
You basically want a 2 column layout mixed with a conditionnal display for the first column.
The column display will be handled fully by bootstrap (and you actually messed up a lot with your columns here), the conditionnal display should be managed through your component state.
First your layout should look like somthing like that :
<div className='row'>
<div className='col-sm-7'>
<div> [your chart here] </div>
</div>
<div className='col-sm-5'>
<div> [your first block here] </div>
<div> [your second block here] </div>
</div>
</div>
Then you need a boolean value inside your component state that will decide whether or not the chart should be displayed. Lets assume you store this information in this.state.showChart
<div className='row'>
{this.state.showChart ?
<div className='col-sm-7'>
<div> [your chart here] </div>
</div>
: '' }
<div className='col-sm-5'>
<div> [your first block here] </div>
<div> [your second block here] </div>
</div>
</div>
If this is insuffisant, try to improve your explanations a bit and I can work on your sandbox samples directly :)
I have a view that generates a HTML structure of individual client receipts. These receipt images can be of varying heights. If a PDF is uploaded, we convert it to an image for easier rendering, but want to display each page inside its parent container.
<div class="expense-report">
<table class="expenses"> /* Associated expenses table */</table>
<ul class="receipt-list">
<li class="receipt-block border-black multi">
<div class="receipt-number">Receipt1</div>
<img src="...path/to/image/page1" />
<img src="...path/to/image/page2" />
<img src="...path/to/image/page3" />
<div>/* More receipt data if available */</div>
</li>
<li class="receipt-block border-black single">
<div class="receipt-number">Receipt2</div>
<img src="...path/to/image" />
<div>/* More receipt data if available */</div>
</li>
<li class="receipt-block border-black single">
<div class="receipt-number">Receipt3</div>
<img src="...path/to/image" />
<div>/* More receipt data if available */</div>
</li>
</ul>
</div>
I have a requirement to add a "page-break-before" or "page-break-after" onto the "receipt-block" so the whole block will break together if an image is too large for the remaining whitespace on a page when printing/print previewing.
So, if "page1" in my example can't fit onto the first page it attempts to render on, it will break for the entire "receipt-block" and put it on a new page, which can then break wherever its heart desires. Likewise, if "Receipt2" and "Receipt3" are small receipts, they should take up the correct space on the page without breaking (i.e. no page-break-after).
Currently, the "receipt-block" wrapper begins directly after the previous block, but the image page breaks, so I end up with "Receipt1" on one page, with a border, and a bunch of whitespace until it shows the image on the next page, when I'd like it to break the whole block when it decides the image should break.
I've tried several combinations of changing the display style, adding page-break-inside: avoid to all of the elements, using widows/orphans, changing the overflow, converting the whole structure to a table layout, etc. When I do find a solution that seems to work, if you switch the print layout to landscape it reverts to the same issue.
Is there a way to dynamically check if an image is on a different page using JavaScript, or if it will end up page-breaking on it's own, so I can add a page break on the correct items?
Can't seem to figure out how to get this behavior, or if it's even possible? Cross-browser printing support seems to be overlooked and handled differently by browsers.
Any solutions to this issue would be greatly appreciated. Thanks!
I'm trying to match the height of the content area and sidebar on the following site:
http://www.dev-cheweng.co.uk.gridhosted.co.uk/about/
I've added the following line of code to my file js.js
$('.height-page').matchHeight();
Here is the class for my content area:
<div id="content" class="grid_8 height-page">
And my sidebar:
<aside id="sidebar" class="grid_4">
<div class="content height-page">
The script appear to be loading fine, just they're not matching the height. All I get output for both elements is along these lines:
<div class="grid_8 height-page" id="content" style="">
I did originally target each element in the Js with their individual IDs / classes, but couldn't get that to work either. So then I thought maybe I can only apply the height matching to specific classes, hence me going with .height-page , but of course that doesn't work either
Can anyone see what I'm doing wrong?
From the docs:
$(function() {
$('.item').matchHeight();
});
Will set all elements with the class item to the height of the
tallest.
That means that you have to give your sidebar and your content area the same class (at the moment they don't have a common class)
Here's a demo of it working as expected.
I have a two-column page (<p> tags after the first half are moved to column 2 with javascript).
My problem is that I want to break it up into "pages" like you'd see if you were reading a PDF.
Is there a neat way to do this? Or do I need to check if each page is overflowing programmatically as I fill them? Would that even work?
A possible way to do it is to make all different div's with all the copy in it and then with scrollTop go to the according page/collumn.
Something like:
<div id="page1" class="page">
<div id="p1_column_1" class="column">Here all the copy</div>
<div id="p1_column_2" class="column">Here all the copy</div>
</div>
<div id="page2" class="page">
<div id="p2_column_1" class="column">Here all the copy</div>
<div id="p2_column_2" class="column">Here all the copy</div>
</div>
Then css give it a height a width and overflow hidden and then with javascript/jquery something like:
var curr_col = 0;
var col_height = $('.column').height();
$('.column').each(function() {
$(this).scrollTop(col_height*curr_col);
curr_col++;
})
Edit
Check this fiddle to see the result: http://jsfiddle.net/taPjR/3/ .
In the example I copied the text with jQuery from the first div.
And I know it's very a dirty way, but I'm not sure if there is another keeping different fonts/font sizes and the images in the copy in mind.
Maybe a pdf generator like LaTex (http://www.latex-project.org/) could also be interesting?
Hope I could help.