I am tring to get word file from HTML . The problem I am facing is that the header and footer repeating on first page of word in body.Is there is work around to remove or hide the table.
I have tried using margin property but that left empty space between header and body (I will show in screen shot).
enter image description here
The code that I am using :
HTML :
<div class="main">
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div class="header" style='mso-element:header' id="header1">
<p class="MsoHeader">
<table style="float: right;width: 100%;">
<tbody>
<tr>
<td align="right">
<!--<img src="{!URLFOR($Resource.PDF,'PDF/AdaniPort.png')}" style="float: right;" />-->
<img src="https://adanicf--portsdev--c.cs5.content.force.com/servlet/servlet.ImageServer?id=015O00000031R1i&oid=00DO000000555mR&lastMod=1565955266000" height='80' width='60' style="float: right;width=2% !important;height=6% !important"/>
</td>
</tr>
<tr>
<td align="right"><b>{!LogoPortName}</b>
</td>
</tr>
<tr>
<td>
<hr size="2" style="color: black;" />
</td>
</tr>
</tbody>
</table></p>
</div>
</td>
<td>
<div class="footer" style='mso-element:footer' id="footer1">
<p class="MsoFooter">
<!-- <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div> -->
<table id="ftrtbl" style="float: right;width: 100%;">
<tr>
<td colspan="2">
<hr size="2" style="color: black;" />
</td>
</tr>
<tr>
<td style="width:40%;font-size:14px;" align="left" >This Document is strictly confidential</td>
<td style="width:40%;font-size:14px;" align="left" >{!quote.Ref_No__c}</td>
<td style="width:20%;font-size:14px;" align="right"> Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span><span class="pagenumber" />
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
CSS (using margin):
#page main {
mso-header:header1;
mso-footer:footer1;
mso-paper-source:0;
mso-header-margin:0.5in;
mso-footer-margin:0.5in;
}
div.main {
page:main;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter {
mso-pagination:widow-orphan;
tab-stops:center 216.0pt right 432.0pt;
}
p.MsoHeader, li.MsoHeader, div.MsoHeader {
mso-pagination:widow-orphan;
width:1px;
height:1px;
}
table#hrdftrtbl{
margin:50in 0in 0in 15in;}
Already Answered kindly check the link
How to use HTML to print header and footer on every printed page of a document?
thead: this is for the repeated header.
tfoot: the repeated footer.
tbody: the content.
I have not found the proper solution but the trick worked for me is I changed the position of header-footer code below the body tag so that the empty space will be shifted from first page to last page.
exp:
Before:
<div class="main">
---------
-----------
</div>
<body>
----------
----------
</body>
After:
<body>
----------
----------
</body>
<div class="main">
---------
-----------
</div>
Related
I am making a HTML email that a clients suddenly want to be shown as a one-pager without scrollbars. I have edited the wrapper to 'height:100vh', but it still has scrollbars.
I want to know, how would i go about and make this page appear as a one pager without scrollbars in all different screen heights?
<body>
<table width="100%">
<tbody>
<tr>
<td class="wrapper" width="600" align="center">
<!-- Header image -->
<table class="section header" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column center">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/header2.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="section main" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td align="left">
<img src="./media/main-image1.png" alt="picsum" width="600"/>
<br>
<div class="firstparagraph">
<p class="comfortaaquote font40"> You will be OK... </p><br>
<span class="marck"> Sweetheart</span>
</div>
<br>
<br>
<p class="comfortaatext center2">A lady is reassuring her dog everything will be OK in the veterinary hospital in Hanoi, Vietnam while the vet nurse are busy working in the background</p>
<br>
<div class="buttons">
<div class="days-counter">
<img class="steps" src="./media/counter.png" alt="picsum" width="300" />
<div class="text-block"><p>14</p></div>
</div>
<img class="submit" src="./media/submit.png" alt="picsum" width="300" />
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- bottom part-->
<!-- footer part-->
<table class="section bottom" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/bottom.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
should i be targeting the height:100vh to the body or the wrapper?
thank you
I have seen many posts, but couldn't find the right solution. If you have used flying saucer 9 in POM.xml this is the issue with PDF. Can we solve it with css?
Tried a lot but its not working in HTML its good.
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16882">
<div class="caption">
<br>Instructions
</div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1" summary="Instruction" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="1" rowspan="2" class="edit">
<span style="font-size: 20; color:blue; " id=C ol197626>
<b>
The 50 States, District of Columbia, and the
Commonwealth of Puerto Rico and other
territories a Modernizas report is not
considered to be confidential.
<br>
</b>
</span>
</td>
</tr>
</table>
</div>
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16883">
<div class="caption"></div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1" summary="Estimated Figures" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="2" rowspan="1" class="edit">
<span id=C ol197627><b>
</a> Click
<a ref="http://www.acf.hhs.gov/programs/ocs/resource/funding-
applications" target="_blank">HERE</a>
to read the expandctions.
<br><br>
<A>
</b>
</td>
</tr>
<tr>
<td valign="top" colspan = "1" rowspan = "1" width = "74%" class="edit">
<span id = Col197628>
<b>
</A>
Do the data below figures?<br>
If YEpf assistance that has
at least one estimated data entry.
<A>
</b>
</td>
<td valign="top" colspan = "1" rowspan = "1" width = "26%" class="edit">
<span id = Col197629><b></A>Select One<A><br></b>
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
Yes
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
No
</span>
</td>
</tr>
</table>
</div>
the html could do with some fixing do that first,
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16882">
<div class="caption">
<br>Instructions <!-- br should be self closing-->
</div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1"
summary="Instruction" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="1" rowspan="2" class="edit">
<span style="font-size: 20; color:blue; " id=C ol197626> <!-- id is not in quotes-->
<b>
The 50 States, District of Columbia, and the
Commonwealth of Puerto Rico and other
territories a Modernizas report is not
considered to be confidential.
<br> <!-- should be self closing-->
</b>
</span>
</td>
</tr>
</table>
</div>
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16883">
<div class="caption"></div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1"
summary="Estimated Figures" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="2" rowspan="1" class="edit">
<span id=C ol197627> <!-- id is not in quotes where is the close of span-->
<b>
</a> Click <!-- this is a end and should be a start also you have double wrapoped the a which should not be done. (anchor anchor double anchor does not make much sense)-->
<a ref="http://www.acf.hhs.gov/programs/ocs/resource/funding-
applications" target="_blank">HERE</a>
to read the expandctions.
<br><br>
<A> <!-- should be lower case and should be an end, see above-->
</b>
</td>
</tr>
<tr>
<td valign="top" colspan = "1" rowspan = "1" width = "74%" class="edit">
<span id = Col197628> <!-- id is not in quotes where is the close of span-->
<b>
</A> <!-- should be lower case, a start not an end-->
Do the data below figures?<br>
If YEpf assistance that has
at least one estimated data entry.
<A> <!-- should be lower case should be a end and not a start-->
</b>
</td>
<td valign="top" colspan = "1" rowspan = "1" width = "26%" class="edit">
<span id = Col197629> <!-- id is not in quotes-->
<b>
</A>Select One<A> <!-- tag start and end switched-->
<br>
</b>
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
Yes
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
No
</span>
</td>
</tr>
</table>
</div>
I am working with ExtJS 3.3.0 with an RTL fix, and I have an override on all of the required classes to align the fields correctly.
I keep having an issue with floating forms, though, where my field labels sometimes disappear. I have investigated the issue, and discovered that the label is not actually gone - it has just popped over to the left (and therefore doesn't show) for no discernable reason.
Here is what my dialog should look like (and does the first time it's shown):
Unfortunately, here is what it looks like the second time it gets shown:
This is the window HTML as created by ExtJS (Note: the HTML of the document is marked dir="rtl"):
<div class="x-window-tl">
<div class="x-window-tr">
<div class="x-window-tc">
<div style="mozuserselect: none; khtmluserselect: none" id="ext-gen129" class="x-window-header x-unselectable x-window-draggable"
unselectable="on">
<div id="ext-gen135" class="x-tool x-tool-close">
</div>
<span id="ext-gen141" class="x-window-header-text">שינוי תאריך אספקה</span>
</div>
</div>
</div>
</div>
<div id="ext-gen130" class="x-window-bwrap">
<div class="x-window-ml">
<div class="x-window-mr">
<div id="ext-gen134" class="x-window-mc">
<div style="width: 297px; height: 40px" id="ext-gen131" class="x-window-body">
<div style="width: 297px" id="ext-comp-1046" class=" x-panel x-form-label-left">
<div id="ext-gen147" class="x-panel-bwrap">
<form style="padding-bottom: 8px; padding-left: 8px; width: 297px; padding-right: 8px; height: 40px; padding-top: 8px"
id="ext-gen128" class="x-panel-body x-panel-body-noheader x-form"
method="post">
<div style="width: 300px" dir="rtl" id="ext-gen149" class="x-form-item " tabindex="-1">
<label style="width: 75px" id="ext-gen150" class="x-form-item-label" for="ext-comp-1045">
תאריך חדש:</label>
<div style="padding-right: 80px" id="x-form-el-ext-comp-1045" class="x-form-element">
<div style="width: 133px" dir="rtl" id="ext-gen152" class="x-form-field-wrap x-form-field-trigger-wrap">
<input style="width: 133px" id="ext-comp-1045" class="x-form-text x-form-field x-trigger-noedit"
name="ext-comp-1045" readonly value="2012-11-22" size="10" autocomplete="off"
qtip><img id="ext-gen153" class="x-form-trigger x-form-date-trigger" alt="" src="http://localhost/bDox/NipImages/s.gif">
</div>
</div>
<div class="x-form-clear-left">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ext-gen133" class="x-window-bl">
<div class="x-window-br">
<div class="x-window-bc">
<div style="width: 297px" id="ext-gen132" class="x-window-footer x-panel-btns">
<div style="width: 287px" id="ext-comp-1049" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
<table class="x-toolbar-ct" cellspacing="0">
<tbody>
<tr>
<td class="x-toolbar-right" align="center">
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-right-row">
<td id="ext-gen142" class="x-toolbar-cell">
<table style="width: 75px" id="ext-comp-1047" class="x-btn x-btn-noicon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-right">
<tr>
<td class="x-btn-tl">
<i> </i>
</td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-ml">
<i> </i>
</td>
<td class="x-btn-mc">
<em unselectable="on">
<button style="" id="ext-gen143" class=" x-btn-text">
אשר</button></em>
</td>
<td class="x-btn-mr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-bl">
<i> </i>
</td>
<td class="x-btn-bc"></td>
<td class="x-btn-br">
<i> </i>
</td>
</tr>
</tbody>
</table>
</td>
<td id="ext-gen144" class="x-toolbar-cell">
<table style="width: 75px" id="ext-comp-1048" class="x-btn x-btn-noicon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-right">
<tr>
<td class="x-btn-tl">
<i> </i>
</td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-ml">
<i> </i>
</td>
<td class="x-btn-mc">
<em unselectable="on">
<button style="" id="ext-gen145" class=" x-btn-text">
ביטול</button></em>
</td>
<td class="x-btn-mr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-bl">
<i> </i>
</td>
<td class="x-btn-bc"></td>
<td class="x-btn-br">
<i> </i>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="x-toolbar-left" align="left">
<table class="x-toolbar-left-ct" cellspacing="0">
<tbody>
<tr>
<td>
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-left-row">
</tr>
</tbody>
</table>
</td>
<td>
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-extras-row">
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="ext-gen137" class="x-clear">
</div>
</div>
</div>
</div>
</div>
</div>
<a id="ext-gen138" class="x-dlg-focus" tabindex="-1" href="http://localhost/bDox/Asn.aspx?n=20112112_18&cid=8ab8ba6a-1de0-4344-bed6-a48b93c497e6&vid=4cf57ca1-78ea-4d6a-94b5-cd20b322a2f8#"> </a>
Note: this only occurs in IE.
I have read several times that IE has issues with floating elements in RTL mode, and that the fix was to set the width to the container of the floating element.
I have done this on the after render event, but to no avail:
newDateField.on('afterrender', function (field) {
var elem = field.getEl(),
p = elem.parent(),
formItem = elem.parent('.x-form-item');
p.setWidth(elem.getWidth());
formItem.setWidth(300);
}, this);
I have also tried removing the DOCTYPE and using a STRICT DOCTYPE. Also no help.
Any suggestions?
Here is my code:
<form id="form1" style="height: 800px; width:1000px" >
<table style="width: 90%; height: 193;">
<tr>
<td class="style4">
<table style="width: 100%; height: 701px;">
<tr>
<td style="height: 587px; width: 629px;" colspan="4" >
<div id="tableTree" style="height:600px;">
<table style="width: 150px;">
<div id="treeboxbox_tree" style="width:280px; height:100%; ">
</div>
</table>
</div>
</td>
</tr>
<tr>
<td >
<input type="button" value="Add" id="btnAdd" onclick="return someMethod()" />
</td>
<td >
//other button
</td>
<td >
//other button
</td>
</tr>
</table>
</td>
<div>
<td>
<table width="100%" id="smth">
<div style="float:left"><%Html.RenderPartial("Something"); %></div>
</table>
</td>
</div>
</tr>
</table>
</form>
And smth is not shown until I click on a button. But since smth has very large height, the td which has style4 goes down, where the middle of smth is. It is very frustrating. How to resolve it?
I think you mean the vertical alignment is off in the td?
<td class="style4">
Change it to
<td class="style4" valign="top">
Or add to style4
vertical-align: top;
Not sure which version of html you are defining...
This is my simple webpage :-
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background: url('Stripes.png') no-repeat #293231;
background-attachment:fixed;
background-position:0% 25%;
}
.back{
z:index:0;
}
</style>
</head>
<body class="body">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img src='Main.jpg' class="back"/>
</td>
<td>
<img src='Page2.jpg'/>
</td>
<td>
<img src='Page3.jpg'/>
</td>
</tr>
<tr>
<td>
<img src='MiddleLeft.png'/>
</td>
<td>
<img src='MiddleMiddle.png'/>
</td>
<td>
<img src='MiddleRight.png'/>
</td>
</tr>
<tr>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
</tr>
</table>
</body>
</html>
Problem here is due to my large monitor the footer doesn't appear at the bottom of the monitor. It appears somewhere in the middle. How do i ensure that footer appears only at the bottom of the screen irrespective of the size of the screen?
Have a look at:
A Bulletproof Sticky Footer, Woohoo!