> For the complete documentation index, see [llms.txt](https://documentation.ajaxsearchpro.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.ajaxsearchpro.com/layout-settings/compact-search-box-layout.md).

# Compact Pop-Out Search

Search icon that pops open when clicked, useful in narrow spaces, menus and sidebars.

{% embed url="<https://youtu.be/LB7oLfuBWdI>" %}

Plugin version 4.0 and later includes the compact box layout, a pop-out search icon, that slides open a search bar upon user interaction. This layout is optimal for websites with less or no widget space left.

![](http://i.imgur.com/be4UCiS.gif)

By default, this option is disabled, but you can enable it with one single click under the `Layout Options -> Compact box layout` panel..

<figure><img src="https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L9jkFgNo4lpUof35gvS%2Fuploads%2FeMpMpgtLKEFGVgwbxgsu%2Fimage.png?alt=media&amp;token=55a50e01-301b-48b7-82fc-04f1194bcf87" alt=""><figcaption></figcaption></figure>

## Interaction

![](http://i.imgur.com/zbyw1LV.png)

With these two options you can define which events will open/close the compact search box.

* If the **Close on magnifier click** option is enabled, then none of the events associated with the magnifier icon will work. Thus it won't redirect or start a search event by clicking on it.

## Position and Size

By default the position is set to **"static"**, so it will stay inside it's parent element.

![](http://i.imgur.com/FYOpW8F.png)

If you however want to put it to the side of the page, you will need to change it to **"absolute"** or **"fixed"**.

In absolute or fixed positions it's highly advised to use a fixed width. As you can see on this option page, it's set to **"100%"** by default. Try **200px** or **300px** in absolute or fixed positions to avoid full page width search box.

![](http://i.imgur.com/QdKGkSM.png)

## Position values and z-index

![](http://i.imgur.com/5goIJjM.png)

If using **absolute or fixed** position, you can adjust the top, bottom, left and right values here.

The z-index is also adjustable here.