Skip Navigation

[Resolved] Can the Submit Button on a Custom Search be made sticky

This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 16 replies, has 3 voices.

Last updated by CaseyK4294 3 years, 5 months ago.

Assisted by: Minesh.

Author
Posts
#1816607

Tell us what you are trying to do?
My custom search will have a long list of search criteria to choose from. I want to know if I can make the submit button sticky so that it always appears on the bottom page for the user while scrolling down the search criteria options.

Is there any documentation that you are following?
No

What is the link to your site?
hidden link

#1817933

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

You'll need to add a little CSS to achieve something like this.

I suggest you might try adding columns to the search filter section and put the submit button in one column and the search filters in another column.

Add a custom class to your submit button (e.g. "sticky").

Then add custom CSS that targets that class selector.

The easiest way to add a little custom CSS in a scenario like this is to add a custom HTML block below your button and then add the CSS like so:

<style type="text/css">
.sticky {
position: sticky;
top: 40px;
}
</style>

You'll probably want to tweak the top setting according to your theme and the size of your header, etc.

#1819015

Thank you, I will try this!

#1819021

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

OK, let me know if you get stuck.

#1822781
Screen Shot 2020-10-23 at 2.08.37 PM.png
Screen Shot 2020-10-23 at 2.08.45 PM.png

Hi Nigel,

Yes, I could still use some help please. I tried the method you wrote above and no results. I created a new search in a grid with three columns, the left empty for spacing, the center has the search criteria and the right one has the search button and the reset search button.

I would like to confirm that the search button settings in the block editor, under advanced, is where I enter the "sticky" CSS label for the search button block, in the ID field. Should it have quotations or no quotations? I tried it both ways and no result.

Thank you for your assistance.

#1824543

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Nigel is on Vacation. This is Minesh here and I'll take care of this ticket. Hope this is OK.

Once you add the ID as sticky (without quotes), can you please press the enter key and then save the page/post.

I hope you already added the custom CSS that Nigel shared.

#1824777

Hi Minesh,

The ID is set to sticky (without quote), and I did press the enter key and then saved/updated the page. The CSS that Nigel shared with me had already been added in a custom HTML block directly below the button block, as it appears in my previous screenshot. It is not working at all.

Here is the link to the new page this is on:
hidden link

Please advise...

One additional question related to this search that has come up, is can we also set it so that once the user presses the search button, the page automatically scrolls to the section where the results are instead of the the top of the page?

Thanks for your assistance.

#1824821

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

We entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery. Lets resolve issues one by one.

I see the page you shared and I can see in middle column you have added the search filters and we have to scroll a lot to reach to the search button.

What if we create a three column grid and to each column we add one search filter so in one row we will have three filters? If you want I can show you by moving the search filers but for that I will require access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

#1824877

I understand about the one question per ticket, and will work to get this one resolved first. Thanks.

I do know that the list of search filters is long, but the owner of the site does not want them separated into three columns in a grid, he wants it long in one column, with a floating search button that always appears to the right of the search filters. It is actually already set up in a three column grid. The left column is empty, the center column has the long list of search filters, and the right column has the search/submit button. I don't want to move any search filters, only get the search button to float so it is always visible to the right of the search filters.

#1824881

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I got it, there is no such feature available but if you can share access details I will try to add some CSS and see if I can be helpful to you that should allow you to fix this issue, if no, you will require to contact CSS experts on this.

But first let me try and see.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

#1824999

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I've changed the CSS code you added as given under:

<style type="text/css">
#sticky {
position: fixed;
top: 200px;
}
</style>

Can you please confirm the button you see is as per your requirement.

#1825033

Hi Minesh,

On my end when I visit the page I am still seeing the button at the bottom of the page instead of as a sticky/floating button.

#1825051

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Can you please remove browser cache.

I can see the search button at top right as you can see with the following screenshot:
=> hidden link

#1825053

I see it floating now. Thank you for your help! This issue is now resolved.

#1825055

I realize I had one more question that has to do with this specific issue. Is there a way to stop the button from being fixed/sticky after a certain point in scrolling, once we reach the end of the search criteria?

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.