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
1 Like
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 
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
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
scrolldown
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
Hi,
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
I've been working on this same problem. I tried the CSS suggested by @victordcq. But it doesn't seem to work in a flex container.
I did find a good solution to fix the floating button to the bottom right of the page if any future visitors to this thread are interested:
.psc-floating-button {
position: fixed !important;
bottom: 10px !important;
right: 10px !important;
width: 100px;
}
Still trying to figure out how to fix it to a flex container if any CSS wizards want to chime in.
You shouldn't need the importants, and you should be able to just add those props to your component directly into the styles prop
This works fine for me in flex
position used to not work in the props of (flex) component. idk if that has changed
Weird, I tried copy/pasting your CSS into the background image field just like your screenshot, but it didn't do anything. And yes, I'm looking at the browser when testing. I'm probably doing something wrong, I am very bad at CSS. I'll try playing with it again later.