This topic is locked

How to display some info on the screen that is always visible

5/6/2015 1:22:28 PM
PHPRunner Tips and Tricks
admin

For instance you have a long Add/Edit form and need to display some sort of instructions the way it always stays on the screen and doesn't scroll. Here is how you can.

  1. Proceed to the page where you need to add this functionality, insert PHP code snippet anywhere on the page. Do not worry about where exactly you add it, we are going to set the position of this snippet via CSS.
    Put something like this into this snippet. The ID of the div (fixed-div) is important here.

echo "<div id='fixed-div'>Some important info here</div>";


2. In Custom CSS section add something like this:

#fixed-div {

position: fixed;

top: 1em;

right: 1em;

border: 1px solid #cccccc;

background-color:#ffffff;

padding: 20px;

font: 14px Georgia, Arial, sans-serif;

}



Here we say that our div is going to have a fixed position and will be located in right top corner of the screen.
Here is how it going to look in generated application:

M
mhollibush 2/28/2016



For instance you have a long Add/Edit form and need to display some sort of instructions the way it always stays on the screen and doesn't scroll. Here is how you can.

  1. Proceed to the page where you need to add this functionality, insert PHP code snippet anywhere on the page. Do not worry about where exactly you add it, we are going to set the position of this snippet via CSS.
    Put something like this into this snippet. The ID of the div (fixed-div) is important here.

echo "<div id='fixed-div'>Some important info here</div>";


2. In Custom CSS section add something like this:

#fixed-div {

position: fixed;

top: 1em;

right: 1em;

border: 1px solid #cccccc;

background-color:#ffffff;

padding: 20px;

font: 14px Georgia, Arial, sans-serif;

}



Here we say that our div is going to have a fixed position and will be located in right top corner of the screen.
Here is how it going to look in generated application:



Is it possible to make this pull the text from the database

echo "<div id='fixed-div'>{ %data }</div>";
this would be a great if I could change it on the fly through a admin section of the site

L
leesayer 3/16/2017

OK thanks, all seems logical and I can get the PHP snippet added (in this case on my View Page in the Visual Editor). Then I go back to the Style Editor page and select the 'Custom CSS' button. Then paste the CSS code into that (on my "View" Page). Upload the app changes, and while I get the "message" I wrote on the screen, it is in the left corner and does not move when the page moves up (clearly the CSS code is not in the right place it would seem). Any thoughts on what I may have done wrong? I simply used the 2 code examples you posted (apart from changing the message)..

G
gagsoft 11/3/2017

Is there a way for the List Page headers of a table to stick to the top of the page while scrolling down.
Thanks

Peter G