It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

4 votes
Answer 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 votes

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 in Marketplace Apps & Integrations

Localize Smarter with the Transifex Integration for Bitbucket

Over 52% of internet users say obtaining information in their own language is more important than price and 75% of the world’s population doesn’t speak English. It’s no wonder then that successful gl...

397 views 0 5
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you