{"id":17736161,"date":"2024-05-06T16:03:19","date_gmt":"2024-05-06T16:03:19","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/layout-of-search-input-jumps-when-cursor-focused\/"},"modified":"2024-05-06T16:03:19","modified_gmt":"2024-05-06T16:03:19","slug":"layout-of-search-input-jumps-when-cursor-focused","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/layout-of-search-input-jumps-when-cursor-focused\/","title":{"rendered":"layout of search input jumps when cursor focused"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hello!<br \/>First of all I&#8217;d like to thank the developer of this plugin. Such a great tool!<br \/>I&#8217;ve added some css to it but I&#8217;m stuck with one thing and it&#8217;s driving me crazy.<br \/><br \/>On my website there is a tiny difference in layout when I click the search field (focus). It&#8217;s as if the text &#8216;search for products&#8230;&#8217; jumps when you click on it to search for something.<br \/>You can see this behaviour in the screencast <a href=\"https:\/\/drive.google.com\/file\/d\/18dQUCc8zHNTmh9bj1RqwX7rPLPMMOKc0\/view?usp=sharing\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;t figured out why there is a shift in layout. I must be missing something. Padding, margin, line-height?<br \/><br \/>I&#8217;m not seeing it! Could someone please help me out?<br \/><br \/>I&#8217;ll add the lines of code too:<br \/><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* hide woocommerce sorting filter on shop page*\/\n.woocommerce .woocommerce-ordering select {\ndisplay:none;\n}\n\n\/* PLUGIN - fibosearch filter layout on shop page*\/\n.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {\nbackground: transparent;\n\n}\n\n\/* PLUGIN - fibosearch filter layout on shop page*\/\n.dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input&#091;type=search].dgwt-wcas-search-input{\nborder:none;\ncolor: #dcdcdc;\nfont-family: inherit;\n\n}\n\n\/* PLUGIN - fibosearch filter layout on shop page - change hover color to black*\/\n.dgwt-wcas-sf-wrapp input&#091;type=search].dgwt-wcas-search-input:hover{\nbackground:black !important;\n}\n\n\/* PLUGIN - fibosearch filter layout on shop page*\/\n.dgwt-wcas-sf-wrapp input&#091;type=search].dgwt-wcas-search-input {\nbackground:black !important;\nfont-family: inherit;\nletter-spacing: 2px;\n\n}\n\n\/* PLUGIN - fibosearch filter layout on shop page*\/\n.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 {\nfill:#fff;\n}\n\n.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {\nopacity: 1;\nbackground: #2E0853;\nbox-shadow: 0 0 0 2px #2E0853;\n\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"template":"","class_list":["post-17736161","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17736161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17736161\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=17736161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}