# Perspective: floating action button

**URL:** <https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149>\
**Category:** Ignition\
**Tags:** ignition81\
**Created:** [April 7, 2022, 8:19am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149 "2022-04-07T08:19:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [April 7, 2022, 8:19am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/1 "2022-04-07T08:19:57Z")

</div>

Hi all, is there anything like a _floating action button_ in Ignition Perspective module?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/0147404ea72ae29c7bb063a4a751d63420e305a4.png)  
Or even better a _floating container_ so that you can implement a _floating toolbar_?

Thanks in advance, regards

---

<div class="post-metadata">

**Author:** ![jonathan.taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jonathan.taylor/32/4048_2.png) [@jonathan.taylor](https://forum.inductiveautomation.com/u/jonathan.taylor)\
**Post date:** [April 7, 2022, 8:59am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/2 "2022-04-07T08:59:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 7, 2022, 9:18am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/3 "2022-04-07T09:18:37Z")

</div>

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

might also want to unset the default boxshadow

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

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 6:29pm UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/4 "2022-04-07T18:29:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 8, 2022, 7:08am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/5 "2022-04-08T07:08:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [April 8, 2022, 7:17am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/6 "2022-04-08T07:17:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 8, 2022, 7:20am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/7 "2022-04-08T07:20:32Z")

</div>

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

@victordcq Genius as always 😃

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 8, 2022, 7:27am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/8 "2022-04-08T07:27:55Z")

</div>

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

```auto
.docked-view.dock-cover-shadow-bottom {
  box-shadow: unset;
  pointer-events:none;
}

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 8, 2022, 7:29am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/9 "2022-04-08T07:29:48Z")

</div>

> [@victordcq](#):
>
> `shadow`

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 8, 2022, 7:39am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/10 "2022-04-08T07:39:27Z")

</div>

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](https://chromestatus.com/feature/5794378545102848)

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

> **[Ability to modify Docked view properties via scripting | Voters | Inductive...](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/ability-to-modify-docked-view-properties-via-scripting)**

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

> **[Apply Dock ID to the dom as id | Voters | Inductive Automation](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/apply-dock-id-to-the-dom-as-id)**

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [April 8, 2022, 8:55am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/11 "2022-04-08T08:55:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 8, 2022, 9:33am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/12 "2022-04-08T09:33:58Z")

</div>

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)

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

```

scrollup  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/33b7107865c1a5b31537d63c7b7c7dc9f9276bcb.png)  
scrolldown  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/31ffef1113d755d099bd1773d4ed27ea5c156528.png)

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/67c6db4c6a7bb61f7390d144881d37b514606554.png)

---

<div class="post-metadata">

**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\
**Post date:** [September 7, 2022, 4:38pm UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/13 "2022-09-07T16:38:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 8, 2022, 8:01am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/14 "2022-09-08T08:01:53Z")

</div>

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.

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

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/0820f1933cf96f61cd54cb10d47754fdadadc265.png)

---

<div class="post-metadata">

**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\
**Post date:** [September 8, 2022, 7:21pm UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/15 "2022-09-08T19:21:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rberghammer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rberghammer/32/7150_2.png) [@rberghammer](https://forum.inductiveautomation.com/u/rberghammer)\
**Post date:** [April 7, 2024, 9:53pm UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/16 "2024-04-07T21:53:11Z")

</div>

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:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 8, 2024, 3:52am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/17 "2024-04-08T03:52:22Z")

</div>

You shouldn't need the importants, and you should be able to just add those props to your component directly into the styles prop

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 8, 2024, 6:47am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/18 "2024-04-08T06:47:53Z")

</div>

This works fine for me in flex

> [@victordcq](#):
>
> It should also work for a flex container, though you will probably want to add a width (and height) to it.
> 
> ```auto
> ; position: sticky !important; top: calc(100vh - 60px) !important; left: calc(100vw - 120px) !important; width: 100px;
> 
> ```

> [@victordcq](#):
>
> Note that it doesnt look correct in the designer because it used a weird vh/vw so test the - px in the browser^^

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 8, 2024, 6:49am UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/19 "2024-04-08T06:49:42Z")

</div>

position used to not work in the props of (flex) component. idk if that has changed

---

<div class="post-metadata">

**Author:** ![rberghammer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rberghammer/32/7150_2.png) [@rberghammer](https://forum.inductiveautomation.com/u/rberghammer)\
**Post date:** [April 8, 2024, 2:34pm UTC](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149/20 "2024-04-08T14:34:18Z")

</div>

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.

[Next page](https://forum.inductiveautomation.com/t/perspective-floating-action-button/58149.md?page=2)