Skip to Content (Press Enter)
2022-10-30 15-16-24
Pedro Brandao
1044Views
14Comments
Floating button over a list
Question

Hello,

I need help to create a sticky or floating button over a list in a mobile app. The idea is the button stand still when i do the scroll over the list.

Something like this but over a list:


At the moment i have the list and the button is standing bellow the list but fixed. When i scroll it goes with the list.


0
0
22 Jan 2019
Copy Link
2023-02-10 19-42-59
João Melo
 
MVP

Take a look at this and see if it can help you.

https://www.w3schools.com/howto/howto_css_sticky_element.asp

0
0
22 Jan 2019
Copy Link
2022-10-30 15-16-24
Pedro Brandao

thanks for your reply but even with position set to sticky does not work.

The button keeps moving with the scroll.

0
0
22 Jan 2019
Copy Link
2020-02-28 09-46-54
Eduardo Jauch

Hi Brandaopj,

A search on google (our biggest friend) tells me that the sticky does not work on some situations, like for example, inside table child elements or if a parent has the "overflow: ..." property set...

This will make your task much more difficult, as it is possible to find some workarounds, but most require the use of JavaScript...

Cheers

0
0
22 Jan 2019
Copy Link
2018-09-06 22-01-31
Viraj Kataria

Hi brandaopj,

Try to use this Custom CSS for a sticky button.

SyntaxEditor Code Snippet

.sample{
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

Hope this helps!
Thanks

0
0
22 Jan 2019
Copy Link
2022-10-30 15-16-24
Pedro Brandao

Viraj Kataria wrote:

Hi brandaopj,

Try to use this Custom CSS for a sticky button.

SyntaxEditor Code Snippet

.sample{
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

Hope this helps!
Thanks

thanks for the reply but the button stills moving with the scroll.


0
0
22 Jan 2019
Copy Link
2018-11-21 17-31-38
Priya Khade

Hi brandaopj,

You can put button in the bottom placeholder so that the button will stand still when you scroll it.

check the screenshot for reference

Capture.PNG
0
0
22 Jan 2019
Copy Link
2022-10-30 15-16-24
Pedro Brandao

 wrote:

Hi brandaopj,

You can put button in the bottom placeholder so that the button will stand still when you scroll it.

check the screenshot for reference


hello, This almost work but i get a white background in the container with the button:


i´ve tried to set "background-color: transparent;" but did not work.


0
0
22 Jan 2019
Copy Link
2018-09-06 22-01-31
Viraj Kataria

brandaopj wrote:

 wrote:

Hi brandaopj,

You can put button in the bottom placeholder so that the button will stand still when you scroll it.

check the screenshot for reference


hello, This almost work but i get a white background in the container with the button:


i´ve tried to set "background-color: transparent;" but did not work.


Use custom CSS for background

SyntaxEditor Code Snippet

.BGContainer{
    background-color: transparent !important;
    background: transparent !important;
}

Hope this helps!
Thanks


0
0
23 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Viraj Kataria wrote:


Use custom CSS for background

SyntaxEditor Code Snippet

.BGContainer{
    background-color: transparent !important;
    background: transparent !important;
}

Hope this helps!
Thanks



Hi Viraj,

!important; is not recommended as per cascade guideline. is there any specific reason you put !important for that.


 it should be used only where it is absolutely necessary (in very few occasions) and when there is no other option. In most cases, it is possible to get rid of the need for using !important rules by simply changing the HTML tags on your page or assigning new CSS selectors to them.



Regards,

Pankaj


0
0
23 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Hi there,

Did you try the floating content from Silk UI or mobile UI? 

Regards,

Pankaj.




0
0
23 Jan 2019
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Brandaopj,


I guess this is what you want?? --->  Demo Link

If so please inspect the button for more clarity and below is the applied css on the button:

SyntaxEditor Code Snippet

"   width: 250px; 
    border-radius: 35px;
    position: fixed;
    top: 85%;
    left: 17%;
"


Thanks.

Regards,

Benjith Sam

1
0
23 Jan 2019
Copy Link
2022-10-30 15-16-24
Pedro Brandao

Benjith Sam wrote:

Hi Brandaopj,


I guess this is what you want?? --->  Demo Link

If so please inspect the button for more clarity and below is the applied css on the button:

SyntaxEditor Code Snippet

"   width: 250px; 
    border-radius: 35px;
    position: fixed;
    top: 85%;
    left: 17%;
"


Thanks.

Regards,

Benjith Sam

ok this solution is near but i have an issue.

Every time i click on one option of the bottom bar, the button goes up and them goes down again :(

you can see a small video here:

https://drive.google.com/file/d/1MHMWj9uq6KN4XQORCSzG9KFgGS2-ZmNC/view




0
0
23 Jan 2019
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Brandaopj,


I'm not that much expertise in front-end section but as per my observation I found that the button position get changed on screen transitions. If you set the Default Screen Transition to Fade or None the button will get hold in its fixed position. It's something related to JS+CSS magic :)

Please share the solution if you figure it out.

Thanks



Kind Regards,

Benjith Sam

1
0
23 Jan 2019
Copy Link
2022-10-30 15-16-24
Pedro Brandao

thanks!! your reply fixed the moving div :)

0
0
23 Jan 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.