Floating Form Button

Feature Requests
21

Hi @SantiagoPerez may I request to share CSS of the profile “CSS Profile” as seen in your screenshot?
Thanks

22

Sure,

   <img src="COVER" width="100%" style="object-fit: cover; opacity:0.9;border-top-left-radius:20px;border-top-right-radius:20px;margin-bottom:30px;">

<p><div style="
   background-image: url(AVATAR);
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   width:100px;
   height:100px;
   background-attachment:scroll;
   background-size: cover;
   background-position: center center;
   position:absolute;
   z-index:1;
   transform:translate(-50%,-50%);
   left:50%;
   margin-top: -35px; border: 5px solid white; background-color: #f3f3f3;"></div>
<center>
<br>
    <h2>NAME</h2>

You have to change COVER, AVATAR, NAME with the info you need.

this code was posted by @Deena and @Lucas_Pires

3 Likes
23

You should wrap the CSS code

like this

so that it won’t be “read” by Discourse.

2 Likes
24

I see what you mean.

I dont know how to do that.

25

You can click the </> button to do so.

1 Like
26

Thanks

1 Like
27

Thanks @Jeff_Hager,

I moved the button down and placed it under the code and it’s working well now.

Much appreciated.

1 Like
28

Thanks

1 Like
29

Using CSS you shared, I tried to have floating Whatsapp Button.

7 Likes
30

How did you manage to do it?

31

Using below code

<span><style>
.float{
	position:fixed;
	bottom:10%;
	right:60px;
	background-color:#29958d00;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;

</style></span>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=51955081075&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20Varela%202." class="float" target="_blank">
<img src="https://img.icons8.com/color/344/whatsapp.png" alt="Whatsapp 1" width="80">
</a>

You need to change Your Contact Number after phone= and customized message after text=.

You can change the size of icon by changing width='80'.

I hope this helps.

5 Likes
32

That’s pretty cool!

Thanks a lot @Pratik_Shah!!!

Edit: Do you speak Spanish?

33

I have been using it to simulate quantities in the shopping cart

image
image420×857 97.1 KB

in a test app for a restuarant.

7 Likes
34

This is great @Jeff_Hager

Used the subclasses to get a nice side by side for sign up forms :slight_smile:

image

.lauagL
{
position:fixed;
width:45%;
height:auto;
bottom:5%;
right:0%;
}

.hALGjZ
{
position:fixed;
width:45%;
height:auto;
bottom:5%;
left:0%;
}

7 Likes
35

Anyone has an issue with the floating button not clickable?

36

You have to move the bouton to the end and place the code right above it.

I had that same problem and that’s how I solved it.

2 Likes
37

Thank you, that solved the problem!

1 Like
38

Came up with a solution to the add button. I use a floating add form and give it a condition so that only certain types of user can add a new item.

For anyone new, the current add item in a non-details screen doesn’t give you a choice to prevent certain types of user to add items.

image
image888×532 78.3 KB

2 Likes
39

BEAUTIFUL work :clap::clap::clap:

40

can you share the full code for this? I tried it and just got the text to apear instead of maing the 2 buttons next to each other