CODEWITHSUNDEEP
htmlcsssearch
Bradley Cousins
Bradley Cousins

Reputation: 187

Change the height of google custom search bar

I want to change the height of the google custom search bar, there are many options to style the look of the search bar by using googles custom search editor however none of the options allow you to change the height.

Currently the search bar has a top and bottom border which really does look unnecessary, its just too large and really does not need to be.

Here is the google search bar fitted inside my header bar, as you can see it over laps because its too high. Image of google search

Here is the code of 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>

Please if any one knows how do you change the height of this search bar, i would like it to be 64 px in height.

Thankyou for any help in advance.

Upvotes: 1

Views: 3605

Answers (2)

MattAllegro
MattAllegro

Reputation: 7345

I originally read this question while googling around in search of a solution for the same problem. I emphatized same because, since you didn't show any code from your html page, I'm not really sure we had the same problem (the code you posted can be generated on cse.google.com). I'll post below a solution that worked for my code.

In my case, the <gcse:search></gcse:search> is inside the <div id="topcr">, child of <div id="top">, this latter only 42px high, while the Google thing is exactly 64px high.

Since I could not find (and I still haven't found) a way to set the height of it online, in the layout settings on cse.google.com, I solved by using two CSS attributes of the outer divs. I added:

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

See lines 17, 23 and 29 of the CSS in the following fiddle: https://jsfiddle.net/nr20L4p8/2/, where I used 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>

Upvotes: 1

iomv
iomv

Reputation: 2707

Did you consider to do it building your own custom search bar, deleting the script and replacing it with a custom form wrapped in a div, that you will eventually style as you prefer? Note that to make it work you need your personal ID provided by Google for your website.

<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>

Also you will need to setup the result.html page that will be called by the search form. Check this page out to get the code needed to implement the result page: http://arindambose.com/blog/?p=102

Upvotes: 1

Related Questions