Perspective: floating action button

Hi all, is there anything like a floating action button in Ignition Perspective module?
image
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;
  pointer-events:none;
}

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?
Thanks

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

:man_mage:
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;
}

scrollup
image
scrolldown
image

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^^