Print without overlapping views

Sometimes if you have a lot of Rich Text views, you might encounter a scenario where the text is overlapped when printing a web page even though the web page itself doesn't have this issue.

The reason this happens is due to Knack grouping up the views in using .kn-scene -> .view-group -> .view-column -> .kn-view and setting it as display:flex.

You can read about it in the Knack docs about the CSS builder code.

The JS

None

The CSS

Modify #kn-scene_XXX in line 1 to the scene ID of the web page you will be printing.

#kn-scene_XXX .view-group {
  display: block; /* avoids text overlapping */
}