Perspective: floating action button

Hi all, is there anything like a floating action button in Ignition Perspective module?
Or even better a floating container so that you can implement a floating toolbar?

Thanks in advance, regards

A rough workaround would be to use negative margins and a high zIndex

you can use docked views, set to cover and with no (or transparent) background

might also want to unset the default boxshadow

.docked-view.dock-cover-shadow-bottom {
  box-shadow: unset;
1 Like

Using this I think you would lose all clickable region under your dock as the dock would cover it, right? So you’d need to design knowing that

hm you can do pointer-events:none on the dock then, (and pointer-events:auto on the button in the dock else you cant click it either

How do you set pointer-events:none on the dock? I don’t see that property or a style section where I can set it - sorry, but this is my first perspective project, after 6+ years of vision projects.
Thanks, regards

@pgmo you’ll need to add it manually into the style prop of the root I believe.

@victordcq Genius as always :smiley:

Hm no that wont be enough, it will have to be on this one aswell

.docked-view.dock-cover-shadow-bottom {
  box-shadow: unset;

any way to further specify this to just the dock you want it to apply to?

no:/ It will work on every botom dock. For the docks you dont want this to happen you will have to reapply the boxshadow and pointerevent on the root element of the docked view.

Maybe one day with this css feature, but it wont be any time soon :has() pseudo class - Chrome Platform Status

Or get a feature request from igntion to apply the DockId to the dom, seems like a nice feature
similar to this one i guess

anyways i made one here aswell, maybe they do it faster since its easier to do xD

1 Like

Another way I found to add something as a floating action container to host my buttons bar is a popup view which I open in the view’s onStartup event and close in the onShutdown event. Only caveat is the refresh button of the browser: this causes no view startup/shutdown events so that after a refresh my main view sadly ends up with no floating action container. I found a solution to that, i.e opening the popup also in the session’s onPageStartup event after sniffing the page.props.path property value. Do you see any negative side effect to that flow?

Hmm i wouldnt use a popup view.
it will be more work and you wont always be sure its open

I’ll try to wizard something up that bypasses the igntion styles and sticks it to the bottom, after my lunch break

or now i got some time, you can create a class like this: (substract more/less depending on your button size)
and put it on the button in your view, no need for docks or popups:)
(note it gotta be in a class, because ignition overwrite the position style if you give it as a style prop)

.psc-floatingMagic {
  position: sticky !important;
  top: calc(100vh - 60px) !important;
  left: calc(100vw - 100px) !important;


you can inject these properties in the style like so:
; position: sticky !important; top: calc(100vh - 60px) !important; left: calc(100vw - 120px) !important;
Note that it doesnt look correct in the designer because it used a weird vh/vw so test the - px in the browser^^

1 Like


What is the main container type of this view (flex, coordinate, etc…)? Also, what type of view is the button in? I have a flex container and trying your style class on a button, but it doesn’t do anything.

I did it in a coordinate container.
Note this does not look good in the designer, so check it in the browser!

It should also work for a flex container, though you will probably want to add a width (and height) to it.

; position: sticky !important; top: calc(100vh - 60px) !important; left: calc(100vw - 120px) !important; width: 100px;

1 Like

I’ll have to give this a try.

Another method that would work for a type of floating action button, would be to use the View Canvas. This however would be a per view basis, so would have to be done to every view you navigate to and want a floating action button.

Since this allows multiple views in a coordinate structure, you can put the main view you want along with a view of the button (floating action button) and of a menu bar that expands when the button is pressed. This is a total of at least 3 instances. The trick is on the view canvas to set the z-order of the menu bar instance to a negative or something below the main view. This could be done through message handlers. Configure events like onClick to send a message to hide the menu bar and change z order. This will not only hide the menu bar, but you’re clicks will not be blocked.

The other important step, in the View Canvas’s instances, you need to play around with the top, left, bottom, right, etc. (set one to null and other’s to a certain distance) and position to either fixed or sticky to keep the button from moving.

1 Like