Friday, December 22, 2017

Customize the Printable view of a SharePoint list form

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,

No comments:

Post a Comment