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

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?

0 vote

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
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Bridget Sauer
Published Thursday in Marketplace Apps

Calling all developers––You're invited to Atlas Camp 2018

 Atlas Camp   is our developer event which will take place in Barcelona, Spain  from the 6th -7th of   September . This is a great opportunity to meet other developers and get n...

313 views 0 6
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