I am converting HTML into PDF and its working perfectly but I have an issue with how data is being displayed.
I have an array of strings and I am looping through them and displaying them within my ejs template.For example:
<div style="page-break-after: auto; padding: 10px;">
<h3>Cost Saving Calculation:</h3>
<p><%= modules[i].costSavedInfo %></p>
</div>
<div style="page-break-after: auto; padding: 10px;">
<h3>Culture Change</h3>
<p><%= modules[i].cultureChange %></p>
</div>
<div style="page-break-after: auto; padding: 10px;">
<h3>Other Efficiency</h3>
<p><%= modules[i].otherEfficieny %></p>
</div>
The issue:
When the PDF is generated the text is displayed across 2 pages like this:
In the above image half the text is on one pdf page and other on second page.
I am not sure whether it is possible or not but how can I change the HTML that it moves the text over to a new page if its going to be displayed across 2 pages. Now the length of the text in the array could be anything.There are no word limitations.
Is this even possible?
The problems you have when a page break confuses your paragraphs are called orphans and widows.
You can define via CSS how many lines are not separated before breaking the page.
Please check out these descriptions:
widows - "The widows property in CSS controls the minimum number of lines of a paragraph that can fall to a new page."
orphans - "The orphan property controls the minimum number of lines of a paragraph that can be left on the old page."
I think, you want to define both properties to have a senseful output.
Related
My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/
The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example.
This is my code, taken from the JSFiddle above:
<div class="card">
<img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">
<div class="card-info">
<h2 class="listing-title title-wrap">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</h2>
<p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
<ul class="listing-key-specs ">
<li>2020 (20) reg</li>
<li>Estate</li>
<li>40 miles</li>
<li>3.0L</li>
<li>339BHP</li>
<li>Automatic</li>
<li>Petrol</li>
<li>1 owners</li>
</ul>
<ul class="listing-extra-detail">
</ul>
<p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
<div class="seller-info ">
<div class="phone-code">
Tel: (0114) 49600000
</div>
<div class="seller-type">
Trade seller
</div>
<div class="seller-location">
<span class="seller-town">Sheffield</span> -
43 miles away
</div>
</div>
</div>
<section class="price-column">
<div class="vehicle-price">£46,795</div>
</section>
</div>
Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have .
There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).
Like this:
This is the intended end result:
I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.
I would really appreciate any advice or guidance on making this look better.
Try using overflow: hidden in .layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:
.layout{
//rest of the styling here ....
overflow: hidden;
}
.ul{
//rest of the styling here ....
white-space: nowrap
}
.card-info
{....}
.card-price
{
padding: 1rem;
font-size: 0.9rem;
}
In Your CSS Change the padding of card-price from 2rem to 1rem
check the space in the image
The issue I am facing now happens in an automated form generated by JS, which is using controls trimmed in DIVs. The resulting HTML is given here:
<div id="E0" style="width:200px;" class="FLD">
<div style="flex: initial;">Val A：</div>
<input type="text" style="flex: 1 1 auto;">
</div>
<div id="E1" style="width: 600px;" class="FLD" lf="1">
<div style="flex: initial;">Val B：</div>
<input type="text" style="flex: 1 1 auto;">
</div>
<div id="E2" style="width: 400px;" class="FLD">
<div style="flex: 1 1 auto;">Val C：</div>
<input style="width:60px; flex:initial;" type="text">
</div>
The associated CSS:
.FLD{ display:inline-flex; flex-direction:row; }
.FLD[lf]::after{ /* The issue described below*/ }
Note that the "inputs" above may be different elements and the above is just "private case".
The issue:
As from the above structure, I expect the DIV "E0" and DIV "E1" to be in the same line, while "E2" in a separate line below (assuming the parent container wide enough, at least).
The DIVs will appear all inline (because by default I want them to be like this). However, the attribute "lf" if set (can also be set by JS internal property), shall virtually add <br> element after the DIV.
If I create <br> element after the DIV, it will make a problem if I want to remove the DIV in one command also its "<br>" - as they become 2 separated elements - and as this appears in SPA, I want to have a clean removing function or hidding function to handle that element only, without considering "trailings".
If I use "display:flex;" instead of "display:inline-flex" for just that one particular element, the situation will become all DIVs in separate lines (not inline element which happen to be the middle one, will cause the previous to be on top and the next below it).
The last approach I thought to use, is .FLD[lf]::after{ content:'' } selector - but then, my question is comming:
Is there such possibility in CSS to somehow add line feed (something like "<br>") after DOM element? I have tried "content", but it seems working on text-string only, so even "\n" is not doing what I want. I believe that is not possible, but maybe I am wrong and there is another way...
I don't think that what you re asking is possible. But...
You can use float and clear css properties combined:
#E0, #E1, #E2{
float: left;
}
#E2{
clear: left
}
This will arrange your divs in a similar way
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.
This question already has answers here:
Are (non-void) self-closing tags valid in HTML5?
(8 answers)
Closed 7 years ago.
It's working this way on all the browsers I can see the page from. I swear to you that this is the exact code from the html:
<td class="bardisplay">
<div class="bar hot" />
<div class="bar cool" />
</td>
But yet in the debugger of every single browser I've brought this up in, the DOM inspector shows something like this: (Chrome, here)
There is no difference between Mozilla, IE, and Chrome. I about freaked out when I saw it in the Chrome debugger.
Here is all the pertinent CSS:
td.bardisplay {
height : 66px;
padding : 8px 0px;
margin-left : 5pt;
}
.bar { height : 50px; }
.hot {
float : left;
background-color : red;
}
.cool {
float : left;
background-color : green;
}
Now, the really weird thing: I did not have this problem, with the same html when I put all my bar displays into a main table (3 levels up).
I had a six-column table, one with a label, one with a display, and one with a ratio, and the next three repeating, but I did not like how the second set of columns would "wag" back and forth as the table was updated. So I set the master table to a single row of two tds with three-column tables inside them. The display is now rock-solid, except that the DOM wants to put one div inside the other.
I googled this about every way I could think before posting here.
<div>'s cannot self-close, so the browser assumes the second one is the child of the first one:
<td class="bardisplay">
<div class="bar hot"></div>
<div class="bar cool"></div>
</td>
In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.
Source
How about this?
<td class="bardisplay">
<div class="bar hot"> </div>
<div class="bar cool"> </div>
</td>
I'm having a error messages in different tabs in my UI screen.But in one of the TAB the warning icon is not displaying in the middle of the screen.And that screen tab contains 2 Lines of error message and other screen tabs are containing one line message.
I'm using common class for all the tabs if i change the "style="margin-top:-6px" " from -6 to 0. The tab is displaying the icon in the correct position.but other screens are affecting due to this.
The 2 line error message needs 0px and other screens are needs -6px. So how can i do this with out creating separate classes for each tab
<div class="error-message-container" ng-show="workloadConfigurationErrorMessage != ''" style="height: auto;">
<div class="error-message-content" >
<img src="app-vrm/img/error-warning-icon.png" style="margin-top:-6px"/>
<p>
<span translate="workloadconfiguration.view.SYSTEM_WARNING"></span><p> {{workloadConfigurationErrorMessage}}</p>
</p>
</div>
</div>
Instead of
style="margin-top:-6px"
give
ng-style="myStyle"
and in the corresponding controllers give,
$scope.myStyle={};
$scope.myStyle.marginTop="-6px"; or $scope.myStyle.marginTop="0px";
which ever view applicable.
Hope, I answered your question.