This topic is locked

Adding a floating command bar for Add or Edit form

9/9/2019 4:19:57 PM
PHPRunner Tips and Tricks
A
acpan author

Here's a simple tip on how to have a floating command bar at the top of your add and edit form. It will stays sticky on the top of you screen, useful when you have a long form.
(Inspiration from PHPRunner's invoice template)
How it looks like:

[


](https://ibb.co/dcyR3pJ)
Step 1: Go to Designer page of your table and select the Edit or Add form.
Step 2: Add a horizontal row on top of the title and click Custom CSS and paste the following:



/* floating command bar */

:host {

padding-top: 7px;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 55px;

border-bottom: 1px solid #b7b7b7;

border-top: 1px solid #b7b7b7;

z-index: 101;

background: white;

}


Step 3: Insert standard buttons eg. Add, Back to List and Cancel to the row.
Step 4: Remove the standard buttons below the form as you no longer need them.
Step 5: Click on the title row and add Padding Top with 50px, so that you can see the title on live site.
That's it.

admin 9/10/2019

I think a screenshot would be a nice addition here, just to see what kind of command bar you talking about.

A
acpan author 9/10/2019

Sure, the tips is updated with screenshot.
ACP