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.
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.
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
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.
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.
Did you see my reply 2 days ago above by chance????
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. **
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
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. **
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?
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.
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.
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
My apologies. Now, it is a private reply.
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).
