PrintPreview formating

Post Reply
Posts: 20
Joined: 26 Jun 2014, 02:39
Location: Lithuania

01 May 2019, 22:22

For one of my project pages is requirement to be printed from the browser.
For this to work is used css @media syntax
With the following have managed disable printing of buttons.

Code: Select all

@media print {
  body {
    min-width: 1024px;

  .no-print, .no-print *,
  .c-buttonbar, .c-buttonbar *{
    display: none !important;
But I have issue that responsive table is printed like in mobile device style (with one column in responsive table):
At least I would like data to be printed in 2 column table, not in 1 column like is now.

According similar discussion: ... top-layout
solution should be to use css syntax

Code: Select all

@media print and (min-width: 1024px) {
But this example does not work with Primefaces Babylon theme.

table in page is created with this code

Code: Select all

        <h:form id="my-orm">
            <div class="card card-w-title c-edit-form">
                <div class="ui-g">
                    <div class="ui-g-12 ui-md-6 ui-lg-6">
                        <p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank form-group form-elements"
                                     columnClasses="ui-g-12 ui-md-4,ui-g-12 ui-md-8">
                            <p:outputLabel value="No" for="@next"/>
                            <p:inputText value="#{}" readonly="true" style="font-weight:bold"/>
Have you had similar printPreview requirement and have solution for it?
PF 6.0, Tomcat 8.0, JSF 2.3

Posts: 4638
Joined: 29 Jun 2013, 12:38

06 May 2019, 11:26

Could you please try it without layout="grid"? You may need to override ui-g-12 ui-md-4,ui-g-12 ui-md-8 classes in @media print.

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest