Xojo Conferences

« MBS REALbasic Plugins… | Home | Tip of the day: How t… »

Tip of the day: Hide button on printing in web app

To hide a button when printing a web page made with REAL Studio Web Edition, you can use CSS like this.

First you have a webpage with a print button on it. Inside the button, you simply code
  ExecuteJavaScript "print();"
to print the page with the browser's print dialog.

Next you create a style in the project. We name it "PrintHiddenStyle" for this example. Assign this style to the button you want to hide. Now you can add a page source object to your web page. There you define this html/CSS style:
<STYLE type="text/css">
@media print
.PrintHiddenStyle { display: none; }
Simply paste this. Location for the page source is "header".
And that's it. If your browser does CSS correctly and the name of the style in CSS and the style in your project matches, the button is not visible for printing.

Download test project: printtest.rbp.zip
01 03 11 - 22:15
eight comments

Hi, thanks for this – is it possible to use CSS like this in Xojo? (version 2013, release 3.3)

Simon - 14 12 13 - 23:19

This example project seems to work fine in Xojo for me.
Christian Schmitz (URL) - 14 12 13 - 23:52

It also works for me, but I don’t understand how it is done.
Simon (Email) - 15 12 13 - 01:07

Opent the project. On the webpage1 is a PageSource object named PageSource1. If you look on it in inspector, it has a Source Property. And there is the CSS you see in article above. This CSS is included in the website, so the button is hidden in printing.
Christian Schmitz (URL) - 15 12 13 - 09:25

OK, now I see the CSS – it’s in the Inspector, when I’ve selected PageSource1 on the web page!

But I still don’t understand how it is done. How did you add this page source object to the web page?
Simon (Email) - 16 12 13 - 14:37

You can add a page source object from the library to your webpage.
Christian Schmitz (URL) - 16 12 13 - 17:03

OK, now I see, thanks.

What resources would you recommend I can use to learn these fundamentals? The phrase “page source” is only mentioned once in the entire documentation that comes with Xojo, and it does not tell you how to add it. The forums mention it but none of them tell me anything useful!

I am a beginner to Xojo, and would like to use it for developing a commercial application, but I am having trouble finding out how to do the basic things (like using CSS!).

I would appreciate any pointers to any useful resources. It seems to me like everyone just “knows” how to do these things! How did they find out??

Many thanks for your help.
Simon (Email) - 17 12 13 - 11:22

Very helpful tip Christian, thanks.
Andrew Dempsey (URL) - 29 12 13 - 12:27

Remember personal info?

Emoticons / Textile

Hide email:

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.