PrintPreview formating

[lbroker]

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):
https://ibb.co/vYrKB6k
At least I would like data to be printed in 2 column table, not in 1 column like is now.

According similar discussion:
https://stackoverflow.com/questions/241 ... 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="#{objectView.dev.no}" readonly="true" style="font-weight:bold"/>
                            ......

Have you had similar printPreview requirement and have solution for it?

[mert.sincan]

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.