This content is likely not relevant anymore. Try searching or browse recent questions.
The search box isn't display correctly 1 Recommended Answer 6 Replies 0 Upvotes
I created successfully the search engine, but when I try to put the JS code in my WordPress site and replace the regular search box, it isn't displayed correctly:
![]()
As you can see the text box has two lines and obviously it doesn't look good.
The public URL of the search engine works fine: https://cse.google.com/cse?cof=FORID:0&cx=partner-pub-7206888544689090:8280076863
This is the URL of my website: https://kodibeginner.com
Please assist me in solving this issue.
Recommended Answer Recommended Answers (1)
Recommended Answer
Most Relevant Answer
Hi Oren,
A simple form code as the search box would work with "Results-only" layout for reference:
<form name="google search" action="Your results page.html">
<input id="search" name="q" size="50" type="text" />
<input value="Search" type="submit" autofocus />
</form>
As per the information provided, it seems your code is overriding the search engine implementation code and that is the reason you are seeing the problem.
You can consider, implementing the search engine using the "Results-only" code on your website. When using "Results-Only" layout, one needs to use his own search box to submit the search query. In this method, your search box code should call search and pass on the results to results page and we only provide the code for the Results page which can be pasted on the page where you want to display the results. Please review the document for the layout options and search for "Results Only" where you will find the details with examples:
A simple form code as the search box would work with "Results-only" layout for reference:
<form name="google search" action="Your results page.html">
<input id="search" name="q" size="50" type="text" />
<input value="Search" type="submit" autofocus />
</form>
Note: The examples are provided for user convenience. In action parameter, you will need to enter the page URL where you have pasted the "Results-only" implementation code.
Thanks
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Most Relevant Answer Most Relevant Answers (0)
All Replies (6)
Recommended Answer
Most Relevant Answer
Hi Oren,
Accessed your website "https://kodibeginner.com/" and was not able to see the query which you have reported. It seems you have the search box implemented properly.
Thanks
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
Most Relevant Answer
Thanks for checking!
The search box in your screenshot is the regular WordPress search box and not the one used by Adsense.
I removed the Adsense search box JS code because it doesn't look good, as you can see in the screenshot I attached.
What do I need to do to fix this?
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
Most Relevant Answer
Hi Oren,
As you mentioned "I removed the Adsense search box JS code" but when I accessed your website https://kodibeginner.com/ and performed search, I'm seeing the same search box:
Otherwise to narrow down the problem, can you please create a test html page and implement the default Programmable Search Engine implementation code only and check if you are seeing the same problem. If the search box is rendered properly that means there is some code in your website implementation which is overriding the default Programmable Search Engine implementation code and cresting the problem.
You can use browser developer tool i.e Inspect Element and check out things.
Thanks
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
Most Relevant Answer
Hi,
The search box you are referring to is the default WordPress search box, which is based on PHP code not and related to JS at all.
If I put the Adsense JS code I get a search box with the text "Enhanced by Google", but its rendering is all wrong as you can see in the screenshot I sent.
If I implement at test HTML page, as you suggested, the search box is rendered correctly.
I will use the browser tool to try finding what override the default Programmable Search Engine implementation code. However, I am not sure what to look for.
Can you instruct me what in the CSS code can cause such problem?
Thanks a lot for your help!
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
Most Relevant Answer
Hi Oren,
A simple form code as the search box would work with "Results-only" layout for reference:
<form name="google search" action="Your results page.html">
<input id="search" name="q" size="50" type="text" />
<input value="Search" type="submit" autofocus />
</form>
As per the information provided, it seems your code is overriding the search engine implementation code and that is the reason you are seeing the problem.
You can consider, implementing the search engine using the "Results-only" code on your website. When using "Results-Only" layout, one needs to use his own search box to submit the search query. In this method, your search box code should call search and pass on the results to results page and we only provide the code for the Results page which can be pasted on the page where you want to display the results. Please review the document for the layout options and search for "Results Only" where you will find the details with examples:
A simple form code as the search box would work with "Results-only" layout for reference:
<form name="google search" action="Your results page.html">
<input id="search" name="q" size="50" type="text" />
<input value="Search" type="submit" autofocus />
</form>
Note: The examples are provided for user convenience. In action parameter, you will need to enter the page URL where you have pasted the "Results-only" implementation code.
Thanks
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
Most Relevant Answer
I will try it, thank you!
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
This question is locked and replying has been disabled.
Link to post
Delete post?
This will remove the reply from the Answers section.
Notifications are off
Your notifications are currently off and you won't receive subscription updates. To turn them on, go to Notifications preferences on your Profile page.
This reply is no longer available.
Badges
Some community members might have badges that indicate their identity or level of participation in a community.
