How to Hide Floating Actions Items after Click on any Items out of all?

How to Hide Floating Actions Items after Click on any Items out of all?

  

Hi Team,


I have integrated Floating Action in my Application , where there are 4 Items after click on (+) button, Once I select, Plus(+), all items are visible with icons but once I select Any of them, the Background is not visible, means the FloatingActions is still on Clicked mode,

Please do let me know How to Hide Floating Actions Items after Click on any Items out of all?

For reference please take a look on image.

Once I clicked any options I want to hide to items lists.

Many thanks 

Dileep

Hi Dileep,

Since the Floating Actions block doesn't have an event, it must be controlled through javascript.

On the onclick of each item, try something like the following:
document.querySelector(".floating-actions").classList.remove('floating-actions--visible');

Hope it helps

Henrique Batista wrote:

Hi Henrique,

Thanks for you suggestions.


I tried with the javascript given by you, saying error that classList not found?

When I tried with

document.getElementById("b4-FloatingActions").className = "floating-actions OSInline";

It's working but when I tried to click again on  floating plus(+) button, I need to click twice ??

Please do help me on this


Thanks

Dileep

Hi Dileep,

Since the Floating Actions block doesn't have an event, it must be controlled through javascript.

On the onclick of each item, try something like the following:
document.querySelector(".floating-actions").classList.remove('floating-actions--visible');

Hope it helps



Hi Dileep,

I get what you're saying. Since the component keeps state of when it's open/closed inside, I can't think of doing it without changing the component itself.

I would clone the component, and do the necessary changes on my side. Perhaps using an input variable that controls the state, something like isOpen should do the trick.

Hope it helps.

Hi,


I copied the widget and just changed the already existent local var IsOpen to an Input Parameter and it seams to work, at least in my scenario.


You also need to make a proxy to the MoveElement function and use it to correct a dependency error (it looks like JS blocks can only access actions of the current module).




Cheers,

Renato

Henrique Batista wrote:

Hi Dileep,

I get what you're saying. Since the component keeps state of when it's open/closed inside, I can't think of doing it without changing the component itself.

I would clone the component, and do the necessary changes on my side. Perhaps using an input variable that controls the state, something like isOpen should do the trick.

Hope it helps.