Apex Code Development You need to sign in to do that
Don't have an account?
nask Need Help in page with CSS & then generating PDF.
Hi I need to develop a pdf which looks like this below:
I have used follwing code to develop this one. but
<apex:page sidebar="false" showHeader="false" >
<apex:form >
<html>
<head>
<style type="text/css" media="print,screen">
.container1
{
width:48%;
margin:2px;
border:1px solid gray;
line-height:150%;
background-color:#8FD8FF;
text-align:justify;
}
.container2
{
width:48%;
margin:2px;
border:1px solid gray;
position:absolute;
top:185px;
right:15px;
background-color:#8FD8FF;
height:65%;
}
.container3
{
width:99%;
margin:2px;
border:1px solid gray;
background-color:#8FD8FF;
height:20%;
}
.container4
{
width:48%;
margin:2px;
border:1px solid gray;
position:absolute;
top:790px;
right:15px;
background-color:#8FD8FF;
}
.container5
{
width:48%;
margin:2px;
border:1px solid gray;
position:absolute;
top:840px;
right:15px;
background-color:#8FD8FF;
height:25%;
}
.container6
{
width:48%;
margin:2px;
border:1px solid gray;
position:absolute;
top:1120px;
right:15px;
background-color:#8FD8FF;
height:15%;
}
.bold
{
margin-left:5px;
margin:1px;
font-family:Calibri;
font-size:25px;
font-weight:bold;
line-height:120%;
}
.normal
{
margin-left:5px;
margin:2px;
font-family:Calibri;
font-size:15px;
font-weight:bold;
}
.bgText
{
font-family:Agency FB;
font-size:25px;
font-weight:bold;
color:#8FD8FF;
letter-spacing:2px;
}
</style>
</head>
<body>
<div class="container1">
<p class ="bold">Condensing Boiler</p>
<p class ="normal">Natural gas fired and liquified petroleum gas fired:</p>
</div>
<br/>
<div class="container1">
<p class ="bold">Micro Combined heat and power (Micro-CHP)</p>
</div>
<br/>
<div class="container1">
<p class ="bold">Heating and hot water controls:</p>
<p class ="normal">TRV's</p>
<p class ="normal">Programmers</p>
<p class ="normal">Room Thermostats</p>
<p class ="normal">Timer and Temperature Control Devices</p>
</div>
<br/>
<div class="container1">
<div>
<p class ="bold">Heating system insulation:</p>
<p class ="normal">Ducting</p>
<p class ="normal">Pipes</p>
<p class ="normal">Cylinders</p>
</div>
</div>
<br/>
<div class="container1">
<p class ="bold">Solar Thermal</p>
</div>
<div class="container2">
<p class = "bold">Notes:</p></div>
<br/>
<div>
</div>
</body>
</html>
</apex:form>
</apex:page>
Bur when i use Renderas = "PDf" it looses it format. So can any help how can i achieve this as i have very less exp in CSS.
I have managed to fix this issue. :)
Insted of using Styleclass , declare styles direclty in the components:
like ex:
<div style="border:1px" />
Thanks
Ashok
All Answers
This is simple version of page:
<apex:page>
<style type="text/css" media="print,screen">
.container1
{
width:48%;
margin:2px;
border:1px solid gray;
line-height:150%;
background-color:#8FD8FF;
text-align:justify;
}
.container2
{
width:48%;
margin:2px;
border:1px solid gray;
position:absolute;
top:185px;
right:15px;
background-color:#8FD8FF;
height:65%;
}
</style>
<div class="container1">
<p class ="bold">Condensing Boiler</p>
<p class ="normal">Natural gas fired and liquified petroleum gas fired:</p>
</div>
<br/>
<div class="container2">
<p class ="bold">Micro Combined heat and power (Micro-CHP)</p>
</div>
</apex:page>
when i use the renderas it doesnt hold the format :(
I have managed to fix this issue. :)
Insted of using Styleclass , declare styles direclty in the components:
like ex:
<div style="border:1px" />
Thanks
Ashok