Configure Taskbox and/or FloatingActions, so they won't apear on bottom right side

I am relatively new to outsystems, please forgive me if this problem was already answered (I was searching for quite some time, including in documentation provided, and couldn't find an answer to this question).

On Our current Reactive App, We Added in the "LayoutTopMenu" (layout block) three different items: a Taskbox block, a FloatingActions Widget, and the "Enter Feedback" block. All three, by default, appear on the bottom-right side of the screen, one on top of the other, resulting in a bad user experience.

I'm hoping someone could help and explain to me where these components can be configured, and how to configure them - so they would apear in different parts of the screen.

Thanks in advance.

Hello CincoMariposas,

Here goes an example for your problem, by changing TaskBox CSS, by changing on the Producer Module.

You can open TaskBox Module like represented:



Then change the stylesheet on the TaskBox Block:


 


Here you can change position CSS to static:

.Taskbox {
    position: static;
    bottom: 95px;
    right: 51px;
    background: white;
    border: 1px solid var(--color-neutral-4);
    z-index: 99;
    border-radius: 4px;
    box-shadow:  var(--shadow-m);
}


After changing TaskBox block CSS on producer module, you must refresh references on consumers module to make sure you can now place the block where you want on the screen.


Best regards,

Tomás Dionísio.

Amazing, thank you so much for you help!

Hello CincoMariposas,

You can do it with CSS. This is the current Taskbox CSS:

.Taskbox {
    position: fixed;
    bottom: 95px;
    right: 51px;
    background: white;
    border: 1px solid var(--color-neutral-4);
    z-index: 99;
    border-radius: 4px;
    box-shadow:  var(--shadow-m);
}

By changing the CSS you are able to place this components where you need 


Best regards,

Tomás Dionísio 


Hello Tomas, thank you for the quick answer

However - when I open the CSS style sheet editor I can't find the current taskbox or the word "Taskbox" anywhere.

Is it because I am accessing the CSS from the wrong place? (added picture)

Where Inside the index should the Taskbox appear? under $5 - widgets? (added picture)

Thanks again,


Hello CincoMariposas ,
You can go to the component module (use clone if needed) and add the following CSS:

.classPosStatic{
 position: static;   
}


This should solve your problem, and place it where you want on the consumer module.


Best Regards,

Tomás Dionísio.

Hey Tomas, thanks again, i can't find these places that you are refering to - should i just write the CSS you wrote above into my existing CSS, no matter where?

Hello CincoMariposas,

Here goes an example for your problem, by changing TaskBox CSS, by changing on the Producer Module.

You can open TaskBox Module like represented:



Then change the stylesheet on the TaskBox Block:


 


Here you can change position CSS to static:

.Taskbox {
    position: static;
    bottom: 95px;
    right: 51px;
    background: white;
    border: 1px solid var(--color-neutral-4);
    z-index: 99;
    border-radius: 4px;
    box-shadow:  var(--shadow-m);
}


After changing TaskBox block CSS on producer module, you must refresh references on consumers module to make sure you can now place the block where you want on the screen.


Best regards,

Tomás Dionísio.

Amazing, thank you so much for you help!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.