> 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

{% 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="/files/zKAiTlNuwhhpXJRipY6s" 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.