Live search macro increase search box size

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! :)

2 answers

1 accepted

This widget could not be displayed.

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!

Hey Neal,

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

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

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

Works great but had to replace:

"quick-search-query"

with:

"search-macro-query"

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!

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>

 

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?

This widget could not be displayed.

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Aug 22, 2018 in Marketplace Apps

How a Marketplace app tech team is achieving gender diversity

Hello! My name is Genevieve Blanch, and I'm the Marketing Manager at RefinedWiki, creators of apps to give teams the tools to customize Atlassian platforms. Currently, 44% of the tech team at Re...

524 views 3 19
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you