layout of search input jumps when cursor focused

  • Resolved evillevi

    (@evillevi)


    5 months, 2 weeks ago

    Hello!
    First of all I’d like to thank the developer of this plugin. Such a great tool!
    I’ve added some css to it but I’m stuck with one thing and it’s driving me crazy.

    On my website there is a tiny difference in layout when I click the search field (focus). It’s as if the text ‘search for products…’ jumps when you click on it to search for something.
    You can see this behaviour in the screencast here.

    With the Devtools window opened one can see the original border flickering when I click with the cursor inside and then outside the search form area. This does not happen when visiting the site itself, but I haven’t figured out why there is a shift in layout. I must be missing something. Padding, margin, line-height?

    I’m not seeing it! Could someone please help me out?

    I’ll add the lines of code too:

    /* hide woocommerce sorting filter on shop page*/
.woocommerce .woocommerce-ordering select {
display:none;
}

/* PLUGIN - fibosearch filter layout on shop page*/
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
background: transparent;

}

/* PLUGIN - fibosearch filter layout on shop page*/
.dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{
border:none;
color: #dcdcdc;
font-family: inherit;

}

/* PLUGIN - fibosearch filter layout on shop page - change hover color to black*/
.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover{
background:black !important;
}

/* PLUGIN - fibosearch filter layout on shop page*/
.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
background:black !important;
font-family: inherit;
letter-spacing: 2px;

}

/* PLUGIN - fibosearch filter layout on shop page*/
.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return path, .dgwt-wcas-style-pirx .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) path, .dgwt-wcas-style-pirx .dgwt-wcas-voice-search svg path, .dgwt-wcas-style-pirx.dgwt-wcas-has-submit .dgwt-wcas-search-submit svg path {
fill:#fff;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
opacity: 1;
background: #2E0853;
box-shadow: 0 0 0 2px #2E0853;

}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Kris

    (@c0nst)

    Hi @evillevi!

    This CSS code should fix the problem:

    .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
.dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	border: none !important;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
  letter-spacing: 2px;
  font-family: "Open Sans", sans-serif;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-input-placeholder {
  letter-spacing: 2px;
  font-family: "Open Sans", sans-serif;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:-moz-placeholder {
  letter-spacing: 2px;
  font-family: "Open Sans", sans-serif;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-moz-placeholder {
  letter-spacing: 2px;
  font-family: "Open Sans", sans-serif;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:-ms-input-placeholder {
  letter-spacing: 2px;
  font-family: "Open Sans", sans-serif;
}

    Regards,
    Kris

    Thread Starter evillevi

    (@evillevi)

    Hello Kris

    Thanks for the swift answer! But unfortunately, I’m seeing the same behaviour…
    I’ve added those lines and still the same. Removed the lines again, and tried adding border: none; letter-spacing… It’s really hard to find what’s causing this!

    Plugin Support Kris

    (@c0nst)

    Hi @evillevi!

    This CSS worked for me (I tested it with a browser extension that allows me to add custom CSS). Make sure you cleared the cache (if you have any) and added it on the end of the field in Appearance -> Customize -> Additional CSS. If that won’t help make all of this CSS !important;

    .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
.dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	border: none !important;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
  letter-spacing: 2px !important;
  font-family: "Open Sans", sans-serif !important;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-input-placeholder {
  letter-spacing: 2px !important;
  font-family: "Open Sans", sans-serif !important;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:-moz-placeholder {
  letter-spacing: 2px !important;
  font-family: "Open Sans", sans-serif !important;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-moz-placeholder {
  letter-spacing: 2px !important;
  font-family: "Open Sans", sans-serif !important;
}

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:-ms-input-placeholder {
  letter-spacing: 2px !important;
  font-family: "Open Sans", sans-serif !important;
}

    Regards,
    Kris

    Thread Starter evillevi

    (@evillevi)

    Hey Kris, oddly enough, now it’s working, the code! Problem seems fixed!!
    There is still a tiny difference in layout that I can still see, but it’s hardly noticeable.
    So THANK YOU for fixing this for me!!!!

    • This reply was modified 5 months, 2 weeks ago by evillevi.
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.