[Resolved] Search Bar Jumps on Load

[Author]

Posts

[Pete]

Hi Jamal,

Thanks for the message.

At the risk of sounding impatient, we'll be making this site live tomorrow. We can't hold off on the off chance you find why our CSS is causing the jump.

We, like you have found, there seems to be all kinds of CSS in the buttons and fields, if we remove this it jumps on load.

I have added the original CSS back to the staging site, this as it is on the main 'live' site:
hidden link

The View is 183 Home Page Search Bar (this right at the bottom).

This site you have access to, this sent yesterday.

We we're working on this site so you may see images and updates.

Many thanks as always, Pete

[Jamal]

The view's CSS gets loaded very early on the page. So, I moved it to the head, after the theme's and Toolset's styles, so it gets loaded before the page starts rendering and it seems to work as expected in Chrome and Firefox.

I added it using a custom snippet, check this screenshot hidden link

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo '<style>
  /* Toolset Support patch */
  
.form-control:focus {
border-color: #cccccc;
outline: 0;
-webkit-box-shadow: inherit;
box-shadow: inherit;
}
input[type]:not([type="button"]):not([type="hidden"]):not([type="checkbox"]) {
width: 100%;
}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url(<em><u>hidden link</u></em>) 100% 0px no-repeat !important;
    background-color: rgba(0, 0, 0, 0);
    height: 50px !important;
	background-color: white !important;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
@media (min-width: 768px) {
.home-row .form-control {
    border: none !important;
}
}
.form-control {
    border-radius: 0;
    box-shadow: none;
}
@media(min-width: 768px) and (max-width:1024px) {
.form-control {
font-size: 14px;
}
}
.col-sm-3 {
padding-left: 10px !important;
padding-right: 10px !important;
}
@media(min-width: 768px) and (max-width:1024px) {
.col-sm-3 {
padding-left: 5px !important;
padding-right: 5px !important;
}
}
@media(max-width:767px) {
.form-group-sub {
margin-bottom: 10px;
}
}


input[type]:not([type="button"]):not([type="hidden"]):not([type="checkbox"]) {
    height: 50px !important;
}
input.boton-filtro.wpv-submit-trigger.js-wpv-submit-trigger.btn {
    text-transform: uppercase;
}
input.boton-filtro.wpv-submit-trigger.js-wpv-submit-trigger.btn {
    position: relative;
    height: 34px;
    padding: 5px 40px;
    float: right;
}
input[type="submit"], input[type="reset"] {
    border-radius: 0;
    padding: 10px 40px;
    color: #ffffff;
    border-color: #626972;
    background-color: #626972;
}
input[type="submit"], input[type="reset"]:hover {
  background-color: #626972 !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
input[type="submit"]:hover {
  background-color: #9099a2 !important;
  color: #ffffff;
}
.js-wpv-submit-trigger {
    margin-top: 28px;
}
@media(max-width:767px) {
.form-group {
margin-bottom: 10px !important;
}
}
label {
    display: none;
}
.js-wpv-submit-trigger {
    margin-top: 0;
}
.form-group {
    margin-bottom: 0;
}
.form-group-sub {
    margin-top: 0;
}

 </style>';
}

I did not remove the styles from the view, I just wrapped them inside a comment.

[Pete]

Thanks Jamal,

Works great and this site has no cache activated yet 🙂

Can I ask, the CSS in the View Search & Pagination I guess no longer has any effect?
If I ever need to change this, I would change the CSS in the Settings > Custom Code?

Also, how does your code know to effect that specific View?

[Jamal]

Yes, the CSS code in the view is the same one in the custom code. Keeping it on the view is just duplication. I don't think it will have any effects except increasing the page size a few kb.

And the custom code is currently loaded for all the pages on the frontend. It can be customized further to handle only the pages where the view is used. I don't see a way to programmatically make this code work only for the pages that include the view, because we need to run it before the page starts to render.
So, you can wrap the add_action code inside an is_page or is_single call, something like:

if ( is_page( 1234 ) ) {
    add_action('wp_head', 'my_custom_styles', 100);
}

[Pete]

Hi there,

Yeah that was going to be my next question, page load as this is going in the header. As long as this is nothing to worry about great however I'll do tests when we make the site live tomorrow. A little concerning anything should increase page size.

Ok you say add:

if ( is_page( 1234 ) ) {

add_action('wp_head', 'my_custom_styles', 100);

}

Your code inside the patch starts with:

<?php
/**
* New custom code snippet (replace this with snippet description).
*/

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

// Put the code of your snippet below this comment.
add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
echo '<style>
/* Toolset Support patch */

If the home page is: post=12

Are you suggesting adding this?

Like:

<?php
/**
* New custom code snippet (replace this with snippet description).
*/

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

// Put the code of your snippet below this comment.

if ( is_page( 1234 ) ) {
add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
echo '<style>
/* Toolset Support patch */

Can you show by example, thing is thsi appears on three pages so far....how would you code look with three separate page/post id's

Thanks, Pete

[Jamal]

I would use:

if ( is_page( 1234 ) || is_page( 567 ) || is_page( 789 ) ) {

Please note that the custom code is out of the scope of the support forum. We can provide guidance or quick snippets to show you the solution, but we can't produce all the custom code for you. If you are not comfortable with programming consider hiring a developer. Or seeking general WordPress forums such as https://wordpress.stackexchange.com/

[Pete]

Hi Jamal,

Hope you are well.
Just run some tests and all this code in the header isn't something we want really.
We're going to delete the code you added, I presume this all we do to remove it completely?

I'm guessing there is no way round other than this method? Our CSS is doing this and the only reason we add it is to compensate for all the padding that's added which is crazy.

[Jamal]

Hello Pete, I am sure the blocks editor has enough settings to adjust the padding on each of the blocks. But, if that's not enough. Then custom CSS is the only solution.

So, if the homepage is post=12, and another page(regular page) is post = 55, you should use:

if ( is_page( 12 ) || is_page( 55 ) ) {
    add_action('wp_head', 'my_custom_styles', 100);
}
function my_custom_styles()
{
 echo '<style>
  /* Toolset Support patch */
.
.
. the rest of the code

[Pete]

Hi Jamal,

I do feel like I've been on this for hours. I've removed your code, while it worked we didn't want this in the header of the Home Page.
I broke the site trying to restrict it to ceratin pages and just thought better to get rid of it.

I don't understand when they both these sites have exactly the same views and search bar, this one on Elementor...
hidden link

Doesn't jump yet this one does using Kadence...
hidden link

And the Kadence one is using Toolset blocks. Am I adding this to the page correctly, there must be something small that is causing this infuriating jump on load. Please see pic and setup attached.

[Jamal]

I guess that Elementor adds its own styles. It will definitely be different than another website without Elementor. Elementor and Gutenberg(Blocks editor) are two different page builders, they will have different outcomes for sure.

Can I ask, why wouldn't you use the custom code solution that I provided?

[Pete]

Hi Jamal,

Ok, I rolled back the site to see why my colleague saw and showed me errors. Your code is back in the site and I see why.

No matter how we add your code to restrict this to just 2 pages, we get an error.

below is what we are adding, this breaks the nav bar and shows the error you can see.

In addition we have three pages, if you see why the error is happening can you give the code for 3 page ID's.
Thank you.
Pete

// Put the code of your snippet below this comment.
if ( is_page( 12 ) || is_page( 28 ) ) {
add_action('wp_head', 'my_custom_styles', 100);
}
function my_custom_styles()
{
echo '<style>

[Jamal]

You can use an array of pages' IDs in the is_page function like this:

is_page( array( 12, 26, 511 ) )

And it will need to be run later on the wp action. The final code becomes:

add_action('wp', 'my_page_check_for_CSS');
function my_page_check_for_CSS() {
  if ( is_page( array( 12, 26, 511 ) ) ) {
    add_action('wp_head', 'my_custom_styles', 100);
  }
}

function my_custom_styles()
{
 echo '<style>
  /* Toolset Support patch */
  
.form-control:focus {
border-color: #cccccc;
outline: 0;
-webkit-box-shadow: inherit;
box-shadow: inherit;
}
input[type]:not([type="button"]):not([type="hidden"]):not([type="checkbox"]) {
width: 100%;
}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url(<em><u>hidden link</u></em>) 100% 0px no-repeat !important;
    background-color: rgba(0, 0, 0, 0);
    height: 50px !important;
	background-color: white !important;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
@media (min-width: 768px) {
.home-row .form-control {
    border: none !important;
}
}
.form-control {
    border-radius: 0;
    box-shadow: none;
}
@media(min-width: 768px) and (max-width:1024px) {
.form-control {
font-size: 14px;
}
}
.col-sm-3 {
padding-left: 10px !important;
padding-right: 10px !important;
}
@media(min-width: 768px) and (max-width:1024px) {
.col-sm-3 {
padding-left: 5px !important;
padding-right: 5px !important;
}
}
@media(max-width:767px) {
.form-group-sub {
margin-bottom: 10px;
}
}


input[type]:not([type="button"]):not([type="hidden"]):not([type="checkbox"]) {
    height: 50px !important;
}
input.boton-filtro.wpv-submit-trigger.js-wpv-submit-trigger.btn {
    text-transform: uppercase;
}
input.boton-filtro.wpv-submit-trigger.js-wpv-submit-trigger.btn {
    position: relative;
    height: 34px;
    padding: 5px 40px;
    float: right;
}
input[type="submit"], input[type="reset"] {
    border-radius: 0;
    padding: 10px 40px;
    color: #ffffff;
    border-color: #626972;
    background-color: #626972;
}
input[type="submit"], input[type="reset"]:hover {
  background-color: #626972 !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
input[type="submit"]:hover {
  background-color: #9099a2 !important;
  color: #ffffff;
}
.js-wpv-submit-trigger {
    margin-top: 28px;
}
@media(max-width:767px) {
.form-group {
margin-bottom: 10px !important;
}
}
label {
    display: none;
}
.js-wpv-submit-trigger {
    margin-top: 0;
}
.form-group {
    margin-bottom: 0;
}
.form-group-sub {
    margin-top: 0;
}

 </style>';
}

[Pete]

Hey Jamal,

Thank you very much for that, not sure if was adding a space or 'something' incorrectly however your code helped and worked.

Final thing. I need to use this on other Toolset sites of ours, if I copy just the code and create a Custom Code patch, assign page ID's will this work on other sites?

Just checking this patch is the only thing you added and changed?

Many thanks again, Pete

[Jamal]

Yes, I only added this code, nothing else.

I can't tell if this code will work on other websites. Maybe it will work if you are using the same theme, and you build a similar search form. In any way, if you need assistance with another site, please open a new ticket and we'll do our best to help.