Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box.

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

Can anyone provide guidance on how to achieve this alignment? In addition, if anyone is familiar with imxprs, do you know how to align the search box with the H1 element in the blog, similar to the example shown in this photoshopped image: View Image Here

javascripthtmlcssuisearchbargoogle-custom-search

Answer №1

To customize the appearance of the search functionality, you can enclose the 

<gcse:search></gcse:search>
tags within a div element and apply styling properties to that div. This allows you to control the layout as needed for your development requirements. Check out the code snippet below:

#searchContainer {
width: 49%;
float: right;
display: inline-block;
}

#heading {
display: inline-block;
width: 49%;
}

.container {
display: flex;
align-items: center;
}
<script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="container">
<h1 id="heading">Articles</h1>
<div id="searchContainer">
<gcse:search></gcse:search>
</div>
</div>

Answer №2

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

.container{
  width: 400px;
  float: right;
}

h1{
  float: left;
}
<h1> Hello, World </h1>
<div class="container">
  <gcse:search></gcse:search>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5

`the issue of $scope object not being passed correctly to ng-if and ng-class ternary conditions

**app.js:** $scope.servers = [ {name:'SQL Server', status:"up"}, {name:'Web Server', status:"down"}, {name:'Index Server', status:"down"} ]; **index.html:** <table> ...

javascriptangularjs

Storing User Information in Cookies using jQuery

My current jQuery script is linked to a button and it functions by toggling font styles on a website by enabling or disabling a stylesheet upon clicking the button. Now, I want to enhance this functionality by saving user preference to a cookie so that the ...

jquerycsscookiesfonts

Navigating with firebase authentication and angular routing

Currently, I am in the process of developing an ionic app using version 4. For this project, I have decided to utilize firestore as my database and implement firebase-authentication for user login and registration functionalities. However, I have encounter ...

javascriptangularfirebaseionic-frameworkionic4

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

csshovercss-transitionscss-animationstransition

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

Is there a way to update the state for a specific location on a map?

I have a requirement to update the quantity of a product by using setCount. let [product.quantity, setCount] = useState(product.quantity); Implementing increment and decrement functions for product.quantity const increaseQuantity = () => { setCoun ...

javascriptreactjsreact-hooksreact-state

Outputting messages to a component with React

I'm attempting to create a component similar to a console where messages are displayed one after the other instead of replacing the old message. My goal is to have a component where I can input strings, like in a chatbox, using different parts of my ...

javascriptreactjs

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

css

Submitting form based on HTML select input issue

I am facing an issue with a select form where the value resets to "10" every time I send the form. Is there a way to keep the selected option, for example "20", after submitting the form? Below is the code snippet: <form method='get' name=&a ...

javascriptjqueryhtml

Guide to using the PUT method in Node.js Express to update a record using the primary key

I'm currently struggling with understanding the proper usage of the put statement in node js. Here is the code I have been using: app.put("/cars/:id", (req, res) => { //retrieving a record based on id (uuid) e.g. http://localhost:3000/cars/a5ad957 ...

javascriptmysqlnode.jsexpress

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

Conceal user input field in React using a hook

I am looking for assistance with a form that has 4 input fields: username, password, email, and mobile. My goal is for the email field to disappear if an '@' symbol is typed in the username field, and for the mobile field to disappear if any digi ...

javascriptreactjsinputreact-hooksfunctional-programming

Angular 2: trigger a function upon the element becoming visible on the screen

How can I efficiently trigger a function in Angular 2 when an element becomes visible on the screen while maintaining good performance? Here's the scenario: I have a loop, and I want to execute a controller function when a specific element comes into ...

javascriptangular

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

Tips for pinpointing a particular item within a JSON document

I am struggling with how to manipulate my JSON file using JavaScript. Each object in the array is associated with an ID, and I want to be able to target specific objects based on their position in the array. For example, how can I append object[1] from arr ...

javascriptjqueryarraysajaxjson

Tips for accessing the values of fields in React Material UI components

When I console log the object, it shows: { "week":undefined, "name":undefined, "code":undefined } Additionally, is it appropriate to wrap all Material UI components in a form tag and treat the entire code as a form? Here is ...

javascriptreactjsmaterial-ui

Guide: Looping through a typed Viewbag array - best practices

I have passed a List<AdminUsers> through the Viewbag to a view. This list is then assigned to a JavaScript variable and looped through. However, when debugging on the view, I noticed that the for loop is not being executed, even though I set a break ...

javascriptasp.netlistfor-loopdocument-ready

What factors dictate the color of rows in jquery datatable designs?

Within the jQuery datatable styles, such as "smoothness," the rows are displayed in different colors. What factors determine which colors are shown on each row? And is there a way to customize this color scheme? Refer to the example below from their sampl ...

jquerycssdatatablestyles

Adjusting the size of a division element to match the dimensions

Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appe ...

htmlcssfrontend