Adjust the size of the Google custom search bar to suit your preferences

Question

Adjust the size of the Google custom search bar to suit your preferences

I am looking to adjust the height of the Google custom search bar, and while there are various styling options available through the Google custom search editor, none specifically cater to changing the height.

Currently, the search bar includes top and bottom borders which seem unnecessary and make it appear too bulky.

When placed within my header bar, the Google search bar overlaps due to its excessive height.

Below is the code for the Google search bar:

<script>
                  (function() {
                    var cx = '007301268677233961693:36-nzkwdslc';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                        '//cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                  })();

                </script>
                <gcse:search></gcse:search>

If anyone has a solution on how to adjust the height of this search bar to 64px, I would greatly appreciate the assistance.

Thank you in advance for any help provided.

html css search

Answer 1

Answer №1

Have you thought about creating your own customized search bar? You can remove the script and replace it with a custom form enclosed in a div that you can style to your liking. Just make sure to use your personal Google-provided ID for your website to make it functional.

<div class="searchbar">
<form method="get" id="searchform" id="searchbox_007301268677233961693:36-nzkwdslc" action="result.html">
<div>
<input value="007301268677233961693:36-nzkwdslc" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>

Don't forget to set up the result.html page that the search form will call upon. You can find the necessary code for implementing the result page at this link:

Answer 2

Have you thought about creating your own customized search bar? You can remove the script and replace it with a custom form enclosed in a div that you can style to your liking. Just make sure to use your personal Google-provided ID for your website to make it functional.

<div class="searchbar">
<form method="get" id="searchform" id="searchbox_007301268677233961693:36-nzkwdslc" action="result.html">
<div>
<input value="007301268677233961693:36-nzkwdslc" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>

Don't forget to set up the result.html page that the search form will call upon. You can find the necessary code for implementing the result page at this link:

Answer 3

Answer №2

When I came across this question while searching for a solution to the same issue, I couldn't help but notice that without seeing any code from your HTML page, it's hard to confirm if we were encountering exactly the same problem (the code you provided could be generated on cse.google.com). However, I found a solution that worked for my situation.

In my scenario, the

<gcse:search></gcse:search>

is within the <div id="topcr">, which is a child of <div id="top">. The height of #top is only 42px, while the Google content is 64px high.

Since I couldn't find a way to adjust its height online in the layout settings on cse.google.com, I utilized two CSS attributes of the outer divs. These are:

overflow-y: hidden for #top,
margin-top: -14px for #topcr ((64px-42px)/2 = 11px but the input field is not vertically centered).

Check lines 17, 23, and 29 of the CSS in the following fiddle: https://jsfiddle.net/nr20L4p8/2/, where I included your JS from cse.google.com.

(function() {
                    var cx = '007301268677233961693:36-nzkwdslc';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                        '//cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                  })();

body {margin: 0px auto; padding: 0px; min-width: 420px; font-family: sans-serif; background-color: #99cccc}
.clb {clear: both; height: 0px}
#top {position: fixed; width: 100%; height: 42px; left: 0px; top: 0px; right: 0px; background-color: #000; z-index: 10; overflow-y: hidden}
#topcr {float: right; margin: 0px; margin-top: -14px; padding: 0px; width: 400px}
#cont {margin: 42px auto 20px auto; width: 360px; padding: 20px; background: #c0e0e0; border-radius: 0px 0px 10px 10px; font-size: 16px; z-index: 1}

<body>
<div id="top">
 <div id="topcr">
  <gcse:search></gcse:search>
 </div>
 <div class="clb"> </div>
</div>

<div id="cont">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</body>

Answer 4

When I came across this question while searching for a solution to the same issue, I couldn't help but notice that without seeing any code from your HTML page, it's hard to confirm if we were encountering exactly the same problem (the code you provided could be generated on cse.google.com). However, I found a solution that worked for my situation.

In my scenario, the

<gcse:search></gcse:search>

is within the <div id="topcr">, which is a child of <div id="top">. The height of #top is only 42px, while the Google content is 64px high.

Since I couldn't find a way to adjust its height online in the layout settings on cse.google.com, I utilized two CSS attributes of the outer divs. These are:

overflow-y: hidden for #top,
margin-top: -14px for #topcr ((64px-42px)/2 = 11px but the input field is not vertically centered).

Check lines 17, 23, and 29 of the CSS in the following fiddle: https://jsfiddle.net/nr20L4p8/2/, where I included your JS from cse.google.com.

(function() {
                    var cx = '007301268677233961693:36-nzkwdslc';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                        '//cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                  })();

body {margin: 0px auto; padding: 0px; min-width: 420px; font-family: sans-serif; background-color: #99cccc}
.clb {clear: both; height: 0px}
#top {position: fixed; width: 100%; height: 42px; left: 0px; top: 0px; right: 0px; background-color: #000; z-index: 10; overflow-y: hidden}
#topcr {float: right; margin: 0px; margin-top: -14px; padding: 0px; width: 400px}
#cont {margin: 42px auto 20px auto; width: 360px; padding: 20px; background: #c0e0e0; border-radius: 0px 0px 10px 10px; font-size: 16px; z-index: 1}

<body>
<div id="top">
 <div id="topcr">
  <gcse:search></gcse:search>
 </div>
 <div class="clb"> </div>
</div>

<div id="cont">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</body>

Adjust the size of the Google custom search bar to suit your preferences

Answer №1

Answer №2

Similar questions

Having difficulty comprehending the syntax of Linear Gradients

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

I'm feeling lost trying to figure out how to recycle this JavaScript function

Tips for setting the tabindex on an element that has an opacity of 0

Is there a way to shift a background image pattern?

Can variables in JavaScript clash with input names in HTML?

Unable to select dropdown button in Python while using Selenium

Attempting to grasp the intricacies of HTML5/JS video playback quality

What are the steps to create a website search feature using PHP?

Align the central element in the Bootstrap menu between two other elements

Ways to activate a function upon validation of an email input type

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

Trouble Aligning Bootstrap Dropdown Menu Link with Other Navbar Links

Steps for embedding a webpage within a div element

jscrollpane does not work properly in Firefox, but it functions correctly in Chrome

Creating uniform image heights using Flexbox

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

Click here to open in a new tab and experience the ever-changing dynamic

Navigating intricate JSON information using AngularJS