Skip Navigation

[Resolved] Search Bar Jumps on Load

This support ticket is created 2 years, 7 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
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9: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: Africa/Casablanca (GMT+00:00)

This topic contains 28 replies, has 2 voices.

Last updated by Jamal 2 years, 7 months ago.

Assisted by: Jamal.

Author
Posts
#2137403

Hi there,

This more a small issue so worth an ask.

We have this search bar on three of our main landing pages. Thing is to watch it as the page loads for the first time.

hidden link

It jumps. It's as if its resizing on load. We have added a fair bit of CSS to it and I have taken bits out, changed bits...messed with it for ages and cant resolve it.

Same search bar on two the pages, on first load the same thing of course:

hidden link
hidden link

Any suggestions as to what we have done wrong or what we may do to stop this jumping on load?

Thank you very much.

#2137899

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello Pete and thank you for contacting Toolset support.

I assume that you are talking about the difference in the height of the search form during loading, right? Check this screenshot hidden link

If that's the case, it comes from a difference of styles of the search button between the theme and the block styles.

Let me first explain how I debug it. I used the network conditions features of the developers' tools to enforce a slow network. And I stopped the loading of the page before the styles of the blocks are loaded. I hope this screenshot explains it better hidden link

The theme has no styles for the height of the Search button, which lets the browser decide how to draw it. Check this screenshot hidden link

Then, the styles are defined for the block load later and the browser applies them. Check this screenshot hidden link

I think that this can be solved by applying the same block's styles into the theme's styles. So, they get also loaded earlier and there will be no differences between the theme's styles and the block's styles.

I hope this helps. Let me know if you have any questions.

#2138171

Hey there Jamal,

Thank you. How interesting, I didn;t know you could 'debug' like you suggested using dev tools....interesting.

Yes you have the issue correct, this is what I was meaning.

Ok, so if I add:
.form-group-sub input[type]:not([type="button"]):not([type="hidden"]):not([type="checkbox"]) {
height: 50px !important;
}

...to the customiser it should work?

I've added the class, is this what you meant? If so it has no effect.

Thank you, Pete

#2139221

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello Pete,

I think that, even if the CSS snippet does not fix the issue, it has definitely some effects. Because the issue may also be caused by the styles of other elements on the page. I only detected this difference in styles for the submit button. And it might be also caused by other elements, the select dropdowns, their parent element, etc.

It may also be caused by the styles optimization on the website. You are currently using a plugin that "minifies" the styles from themes and plugins into its own files. Check this screenshot, multiples styles files are loaded from a cache folder hidden link
Please check this articles about Toolset files that should not be optimized https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

I'll remain at your disposal.

#2139365

Hi there,

Thank you. Hmmm ok, we use the plug in Fast Velocity Minify and another called Prefmatters.

No idea how to target just the search bar for either of these. The issue is less for FireFox and Safari however the most used, Google Chrome is the worst. To be fair its that bad 'in my mind' I'm considering removing the search bar altogether.

Whats more curious and why I thought I was doing something wrong is, we have over 40 of these types of pages..
hidden link

The search bar, nothing jumps on load on these pages.

I see in Toolset support issues with Fast Velocity Minify an cant see any offering a suggestion.

The screen shot you supplied, I can see nothing to exclude with CSS or JS?

I did add this to the Ignore CSS Files
toolset-blocks/public/css/views-frontend.css

I can't see its made any difference.

#2141931

Did you see my reply 2 days ago above by chance????

#2142077

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

I think that what you have done so far has some effects. First, the change in the form is faster than before. Second, I am not able to do my trick and stop the loading on a slow connection. It seems that the styles are always loaded together, but the browser drawing is not consistent. It first draws the form wider, then it draws the final styles.

Can you revert the changes back and allow me temporary access to your website to check it further? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

#2142213

Hey Jamal,

Thank you for your reply.

Remember at the start I asked was the jumping down to CSS or something we had done?

On an older site, the issue doesn't exist, we are working on a clone and rebuild so I added the CSS for the from...from the old to this one. Check it out: hidden link

Now this slow as it has no cache what so ever yet the jump is hardly there.

This the site with updated CSS to get rid of the label field and other things so we could have a very thin form:
hidden link

This issue is the old from with its CSS is its far too big, all that padding at the top and bottom is coming from the form.
Do 'you' have any suggestions how we get rid of all that padding so we have a nice, 'thin' form?

They have always been far to bulky and would have it far thinner if we could.

Many thanks, Pete

#2142575

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Can I log in to this staging site so I can try adding CSS and see how it will affect the rendering of the form?
Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

#2144745

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello Pete, I confirm that the credentials are working for me. However, the issue is not present anymore. I assume that you have done some changes that removed it.

Can you explain what have you done so far? Or better, can you reproduce the issue and let me check it?

#2144785

Hi there,

The issue is still there, all the padding above and below.

As I suspected my css to reduce the padding caused the jump on load. I removed the labels spacing as we don;t use them and various other things. All this I think caused the issue.

So on this live site it still jumps as it has all my css: hidden link
Most noticeably in Chrome.

And you have access to the dev site where i thought you suggested you'd give it a try:
hidden link

I can find no way of getting rid of all the padding above and below the search bar on the dev site. It should, ideally be the same as the sides.

#2148799

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

The top margin of the search button has definitely some effects on the final results, even though if I disable it from the developer tools, the whole height does not decrease. There is something else that I cannot spot yet.

Can you allow me temporary access to your production site, so I can see the styles that you apply there? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

Otherwise, can you apply the same styles on the staging site, and let me check it further.

#2148935

Hi Jamal.

You didn't mark this reply as private so can't supply access.

Please apply this to your next message and I'll send login details. Thank you

#2148955

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

My apologies. Now, it is a private reply.

#2149653

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Thank you, Pete, but I was asking for the production site's credentials(where the issue appears) to analyze the custom code that you have added to it. Otherwise, please add the code again to the staging site and let me know where, so I can analyze it(incrementally).

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