(css) Fix printing of long mails

Fixes #3731

NEWS

@@ -14,6 +14,7 @@ Bug fixes
  - [web] fixed refresh of addressbook when deleting one or many cards
  - [web] reset multiple-selection mode after deleting cards, events or tasks
  - [web] fixed exception when moving tasks to a different calendar
+ - [web] fixed printing of long mail (#3731)
  - [eas] fixed long GUID issue preventing sometimes synchronisation (#3460)
 
 3.1.4 (2016-07-12)

UI/WebServerResources/scss/core/print.scss

@@ -5,36 +5,63 @@
 
 @media print {
 
+  html, body {
+    height: auto !important;
+    min-height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
   // Don't print some components
+  md-autocomplete,
   md-sidenav,
   md-card-actions,
   .md-open-menu-container,
+  .md-chip-remove-container,
   .toolbar-main,
   .view-list,
-  .sg-reversible.sg-flip .sg-face,
-  .sg-reversible:not(.sg-flip) .sg-back,
+  .view-detail .sg-reversible.sg-flip .sg-face,
+  .view-detail .sg-reversible:not(.sg-flip) .sg-back,
   .sg-no-print
    {
     display: none !important;
   }
 
+  // Horizontal flex layout must be ignored for element that could spawn multiple pages
+  .view[layout="row"],
+  section > div[layout="row"],
+  .msg-body > div[layout="row"] {
+    display: block !important;
+    max-height: none !important;
+    position: relative !important;
+  }
+
+  // Ignore layout-fill style
+  [layout-fill] {
+    height: auto !important;
+  }
+
   // Content must be visible to be printed on multiple pages
+  main,
+  section,
   md-content,
+  md-card,
   md-card-content,
   md-card-content pre,
   .view-detail,
-  .sg-reversible:not(.sg-flip) .sg-face,
-  .sg-reversible.sg-flip .sg-back {
+  .view-detail .sg-reversible,
+  .view-detail .sg-reversible:not(.sg-flip) .sg-face,
+  .view-detail .sg-reversible.sg-flip .sg-back {
+    display: block !important;
+    height: auto !important;
+    min-height: auto !important;
     overflow: visible !important;
+    position: relative !important;
+    min-width: 100%; // compensate for flex display
   }
 
   // Remove shadow from Cards
   md-card {
     box-shadow: none !important;
   }
-
-  // Ignore layout-fill style
-  .layout-fill {
-    height: auto !important;
-  }
 }