Live search macro increase search box size

[Boy]

Hi,

Is there a way to move the edit the size of the livesearch macro?
For example, making it bigger similar to the search box on google home page.

Thanks in advance! :)

[nriley · Accepted solution]

Actually this is possible, albeit through a workaround. You can modify every search box to be wider by adding some css to the Global CSS for confluence (via Admin area)

.plugin_livesearch_searchbox {
   width: 500px;
}

If you want to change the size of a searchbox on a specific page, you can use the HTML macro (https://confluence.atlassian.com/display/DOC/HTML+Macro) and input some javascript to change all the search boxes on a specific page.

<script type="text/javascript">
AJS.$("document").ready(function(){
	AJS.$(".plugin_livesearch_searchbox").css("width","500px");
});
</script>

Hope this helps!

[Boy]

Hey Neal,

It works! Thanks so much..
Though, for the "specific page", I still have to try that. but thanks!

[Mike Sheen]

This doesn't work for me.  Is there something I have to change in the script for my specific page?

[nriley]

Looks like we have changed the class used to address the search box (did I really write this 3 years ago!?)

Try this instead:

Single Page (with HTML macro) 

<script type="text/javascript">
AJS.$("document").ready(function(){
    AJS.$(".quick-search-query").css("width","500px");
});
</script>

Global

.plugin_livesearch_searchbox {
   width: 500px;
}

[ryan mosley]

Works great but had to replace:

"quick-search-query"

with:

"search-macro-query"

[Wolfgang Vögele]

Unfortunately this doesn't work for me either.

If I use the HTML Macro it only shows the inserted code but does not apply it to the actual searchbar.

What am I doing wrong?

Thanks for your help!

[Wolfgang Vögele]

It works for me, now.

The problem was, that confluence did not recognize &lt as <

The code I had to insert was:

<script type="text/javascript">
AJS.$("document").ready(function(){
    AJS.$(".search-macro-query").css("width","500px");
});
</script>

[Lars Swart]

I used the following code in an HTML Macro and it works perfectly.

<script type="text/javascript">
AJS.$("document").ready(function(){
    AJS.$(".quick-search-query").css("background-color","#3c72ae");
});
</script>

Now I wanted to set it globally.

I used the CSS Format Template page in the admin center

http://domain.com/admin/viewstylesheet.action

My code is

.quick-search-query {
 background-color: #3c72ae;
}

But it didn't work. I changed the name to "search-macro", "search-macro-query", "quick-search-query" and so on. Nothing did the job.

The sourcecode adresses "quick-search-query" like in my initial test. 

I cleared all caches in my browser. Still no effect. 

Any ideas?

[Chung Park Chan]

As far as I know, there is no way to modify the size of it.