Removing floating content background
Application Type

After adding floating contents to a block in my application to show a icon on the top right hand of a picture gallery, the container for the floating content's background blocks out content where it is not needed. I found the background property in the browser HTML code:

(<div data-container="" class="floating-content floating-content-top-right floating-content-margin " id="b3-b1-b2-FloatingContent"><div id="b3-b1-b2-Content">), have no idea where it links back to the OutSystems widgets. Please see screen shots for what I currently have and what I need: 

(This is what I currently need)

(This is what I'm getting currently)

@Josiah Sng,

To view how the floating content widget links back to your screen, you can click on the 'Widget Tree'. Sample screenshot below:

Your scenario is interesting because by default the Floating Content widget background is transparent, so maybe it is being set in your code and it may be a matter of just removing it.



I assumed so too, but it is not. Also, because there is no styling for this widget, I am unable to set it back to it's default state...

Hi Josiah

I would suggest you inspect your UI element in chrome. You would be able to find which css is setting the background of you element. If the base styling sets it to white you can override this with 

{background:transparent !important;}

Hope it helps.

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