Hi Folks,
I got a task to customize the print view of 'DispForm.aspx'. I've utilized '@print media' query to achieve the functionality.I created a custom CSS file to add the '@print media' query.
The CSS file look as below.
#logo img{
display:none;
}
h2
{
font-weight:bold;
}
h3
{
font-weight:bold;
}
#tabHead
{
display:none;
}
#tabFooter img{
display:none;
}
@media print
{
nobr
{
font-weight:bolder;
font-size:22px;
font-family:Arial;
}
.ms-formbody
{
font-size:22px;
font-family:Arial;
}
#logo img
{
display:block;
height:80px;
direction:ltr;
top:auto;
}
.ms-standardheader
{
background-position:center;
text-align:left;
}
#tabPos > tbody:nth-child(2)
{
padding-right:15px;
`}
#tabPos
{
text-align:left;
border:2;
width:80%;
}
#WebPartWPQ2 > table > tbody > tr:nth-child(3) > td
{
}
.hideField
{
display:none;
}
#WebPartWPQ2 > table > tbody > tr:nth-child(4) > td > table
{
display:none;
}
#tabHead
{
display:table-cell;
font-size:24px;
font-family:Arial;
}
#tabFooter img
{
display:block;
}
}
The print view would be displayed as shown below.
It helped me a lot and we can use it for future purpose.
Thanks,
I got a task to customize the print view of 'DispForm.aspx'. I've utilized '@print media' query to achieve the functionality.I created a custom CSS file to add the '@print media' query.
The CSS file look as below.
#logo img{
display:none;
}
h2
{
font-weight:bold;
}
h3
{
font-weight:bold;
}
#tabHead
{
display:none;
}
#tabFooter img{
display:none;
}
@media print
{
nobr
{
font-weight:bolder;
font-size:22px;
font-family:Arial;
}
.ms-formbody
{
font-size:22px;
font-family:Arial;
}
#logo img
{
display:block;
height:80px;
direction:ltr;
top:auto;
}
.ms-standardheader
{
background-position:center;
text-align:left;
}
#tabPos > tbody:nth-child(2)
{
padding-right:15px;
`}
#tabPos
{
text-align:left;
border:2;
width:80%;
}
#WebPartWPQ2 > table > tbody > tr:nth-child(3) > td
{
}
.hideField
{
display:none;
}
#WebPartWPQ2 > table > tbody > tr:nth-child(4) > td > table
{
display:none;
}
#tabHead
{
display:table-cell;
font-size:24px;
font-family:Arial;
}
#tabFooter img
{
display:block;
}
}
The print view would be displayed as shown below.
It helped me a lot and we can use it for future purpose.
Thanks,