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

The utilization of the Open Sans font family results in certain alterations to the user

Error message: Angular JS encountered an issue when trying to initiate the test module. The cause

The scrolling function halts as soon as the element that was middle-clicked is deleted from the

accordions that are supposed to adapt to different screen sizes are

Having trouble accessing the height of a div within an Iframe

Placing horizontal text over a Bootstrap 5 grid

Incorporating a fixed header title when creating a customizable table

Adjust the Bootstrap Navbar by positioning one navigation item to the right side

React Native: Struggling with Button Styling

Struggling to choose an element within $(this) despite being able to view it in the $(this) outerHTML

What is causing my Fabric.js canvas to malfunction?

Eliminate spaces between divs without any margins or padding

What is the best way to disregard all pathNames and display my index.php file directly from the root of my website?

Is JSDOM able to handle media queries?

Achieve perfect vertical alignment for a set of three identical boxes using CSS media queries

There was an error in calculating the Foundation 5 - 1170 grid

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

Developing an Easy-to-Use PDF Popup Interface

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

Animating SVG elements using CSS