Do not print all of modal container


#1

.modal-container {
  margin: 60px auto;
  width: 50%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;

Trying to figure out how NOT to print the border: 1px in the modal container.

Any easy solutions that can be altered in the CSS?

Thank You.


#2

Something like:-

/* Print Styles */
@media print {
    .modal-container {
        border: none ;
    }
}

#3

Thank you - that worked, I appreciated it.

My modal doesn't fit within the printing area because of a graphic extending beyond the margin. Is there a way to print at 80% using CSS rather than using printing preferences?


#4

You can put whatever alternative css rules you want in the @media print media query. You can have a whole different print stylesheet if you want to.
For example, I hide things like the navigation in print using display: none, because it's of no use in that medium, just a waste of space and ink.


#5

/* Print Styles */
@media print {
    .modal-container {
        border: none ;
        size: landscape;
    }
}

I was trying to print in landscape but adding the size: landscape doesn't work. Where am I going wrong?

Also, would this code have to do with scroll bar and can that be added to the no print?

}
.modal-content {
  padding: 0 10px;
}
.modal-content p {
  margin: 0 0 1em;
}

#6

/* Print Styles */
@media print {
    .modal-container {
        border: none ;
    }
    img {
	width:95%;
	height:95%;
	display:block;
	}
}

Actually, this seems to work pretty good. Thank you for your help.


#7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.