Avoiding header and footer while print page functionality

Avoiding header and footer while print page functionality

  

Hi all, 

 i am using the below code snippet to avoid header and footer.

@media print {
    #Header, #Footer { display: none !important; }
}

 But i don't know how to run the "@media queries" in outsystems. I just wrote the media queries in the CSS of the web screen that needs to be printed but still no effect on the layout while print option.

how can i achieve this?


cheers

Hello Hassan.

I think the way is to use the @page and margin inside the media query, not #header and #footer.

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

But I would say that convert to PDF with HTMLtoPDF and so on will be much better...

Cheers.

Hi eduardo,

i couldn't figure out how can i use the htmlToPdf converter. in this component first we have to upload the html and then have to convert to pdf.

any other solution for this?

kind regards

Hello Hassan.

I think the way is to use the @page and margin inside the media query, not #header and #footer.

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

But I would say that convert to PDF with HTMLtoPDF and so on will be much better...

Cheers.



Hi Hassan,


what do you want to achieve exactly?

Do you want to print a page, but you want to hide the header and footer?

(so technically you do a ctrl+p ? )


if so, you should add that css to, for example the theme or the page css itself.


for the record, you don't run css in outsystems.

It's parsed in the browser.






J. wrote:

Hi Hassan,


what do you want to achieve exactly?

Do you want to print a page, but you want to hide the header and footer?

(so technically you do a ctrl+p ? )


if so, you should add that css to, for example the theme or the page css itself.



Hi j.

yes you got right, i want to avoid header and footer. i couldn't figure out how can i avoid?

i have used the media queries in the css of the page but it does not execute.


cheers

Hi,

make sure you are setting the right classes to hide etc.

so test it easily with developer-tools in chrome for example

and use to test it more easily

@media print,screen {

.Header {      display: none;     } }



Hello J.

 I just want to print the container that contains the report data, nothing else.

Can i use the ID of the required container into the javascript print function call??

cheers


Hassan wrote:

Hello J.

 I just want to print the container that contains the report data, nothing else.


I understand, but I have no clue which part is your header and footer etc.

This will be determined with your source etc.


so for example #header would be strange imho, because normally outsystems generates the id's


J. wrote:

Hassan wrote:

Hello J.

 I just want to print the container that contains the report data, nothing else.


I understand, but I have no clue which part is your header and footer etc.

This will be determined with your source etc.


so for example #header would be strange imho, because normally outsystems generates the id's



can i use the container ID into the java script function call?

javascript?


Ok, let's get back to the beginning.

what do you want to print?

how do you think you need to print it? (via javascript?)

can you share a simple example what you achieved so far?

This could be a simple hello-word application




yea sure,

i am using the javacript function "window.print()" on icon click.

please find the attached screen shot.

ok, so use the css in developertools of chrome, to check which div you actually need to hide with display:none to get what you want.

my bet is, that it will be this div

<div class="Header ThemeGrid_Wrapper">....


like i said, if you test a page with @media all {...}

you can see if your hiding works, then it's onwards to the actual printing




J. wrote:

ok, so use the css in developertools of chrome, to check which div you actually need to hide with display:none to get what you want.

my bet is, that it will be this div

<div class="Header ThemeGrid_Wrapper">....


like i said, if you test a page with @media all {...}

you can see if your hiding works, then it's onwards to the actual printing




yes J i have tested your solution. It hides the page contents. I just want to hide while printing otherwise header, footer and search panel should be displayed.


Hi,


dunno what you are doing wrong, but here is a simple example:

https://joostlandgraf.outsystemscloud.com/PrintPage/Home.aspx



J. wrote:

Hi,


dunno what you are doing wrong, but here is a simple example:

https://joostlandgraf.outsystemscloud.com/PrintPage/Home.aspx




Hi J.

i dont know how you are placing the media query. I used exactly the same syntax as you said.

SyntaxEditor Code Snippet

@media print,screen {

.OSAutoMarginTop {
     display: none;
    }
}

But this statement hides the content which i want to hide when printing the page.


Hi,


Your last reply makes me think you are not yet up to speed how things work with outsystems and webapplications in general.

Did you follow the online courses, there is an excellent mastering css in outsystems course which I suggest you should follow.

--> https://www.outsystems.com/learn/courses/21/master-class-on-css-in-outsystems



J. wrote:

Hi,


Your last reply makes me think you are not yet up to speed how things work with outsystems and webapplications in general.

Did you follow the online courses, there is an excellent mastering css in outsystems course which I suggest you should follow.

--> https://www.outsystems.com/learn/courses/21/master-class-on-css-in-outsystems



Thanks for the concern.

I managed to get this, i was writing down the media query in the wrong way, i never used media queries before. 

I will surely get the time to go through this online courses.


Regards


Hassam


Can you post your solution, for the others use it. Thanks



Alberto Ferreira wrote:

Hassam


Can you post your solution, for the others use it. Thanks



Hi Alberto,

yes, Sure-  I am adding the solution, this is according to my CSS attributes that i wanted to hide.


@media , print{
.Filters_Wrapper{
       display: none;
}

  .Header_Menu{
         display: none;
    }
    .ThemeGrid_Width7{
        display: none;
    }
    .Header ThemeGrid_Wrapper{
        display:none;
    }
    .AppSwitcherContainer{
    display: none;
    }
 

Cheers

Thanks for sharing, Hassan