Search Modal

To add the Search Modal Element, simply search "search" and drag Search Modal to the canvas.

The Search Modal Element lets you display a search form on a modal popup that appears when a button is clicked.

This is a toggle button:

And this is the modal search form that appears when the toggle is clicked:

Search Toggle Settings

The button that triggers that showing of the modal is what we call the Toggle button. This button can be configured to your liking.

Clicking the Toggle tab as shown below...

...will show to you the settings available at your disposal.

In the Setup field group shown above, you'll be able to set the actual height and width of the toggle button, it's minimum and maximum dimensions, its background color when not hovered upon and when it is. The Base Font Size field dictates the size of the toggle button. If you increase it, the entire button will increase in size.

The Content Flex Layout field group allows you to configure the flexbox settings of the toggle button. If you're not familiar with Flexbox, this guide will help you.

The Margin, Padding, Border, Border Radius and Box Shadow field groups are common across majority of the V2 elements that I won't expound them here.

Now by default, the toggle button has a "hamburger" graphic inside it. You have the option to remove the icon and use text instead. To do that, you need to turn On the Text Setup and turn Off the Graphic Setup.

When you turn On the Text Setup, other fields/settings will appear which will allow you to set the primary text, secondary text, the spacing & order as well as how to handle interactions and overflows.

You'll also notice that several groups of options now become available to you as well such as:

• Text Margin
• Primary Text Format
• Primary Text Style
• Primary Text Shadow
• Secondary Text Format
• Secondary Text Style
• Secondary Text Shadow

All of these allow you to customize how the texts, both primary and secondary, will look like.

Text Margin

Use this option to set the margin of the search modal text. You can change the settings for all the sides of the button's text or modify them individually.

Primary Text Format

You can use this control group to set the format of the primary text of the search modal.

• Font Family - Use this option to set the font of the search modal text.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Primary Text Style

You can use this control group to set the style of the primary text of the search modal.

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Primary Text Shadow

The primary text shadow control group contains settings to set a text shadow for the search modal primary text.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Secondary Options

All the primary text related options are available for teh seondary text in the search modal.

What if you want to have both the icon and the text? Is it possible? A resounding YES! Simply enable (or turn On) both the Text Setup and Graphic Setup and you'll have both of them appear on the toggle button.

Want to change the "hamburger" graphic? That's easy and you have multiple ways to do it.

1. Go to Graphic Toggle select from the Type dropdown.

2. If none of the Graphic Toggle types fit your need, go back to Graphic Setup, then click on the flag icon on the Type field.

Then go to Graphic Icon and choose an icon on the Primary & Secondary field.

3. Lastly, you may want to use your own image. To do that, go back to Graphic Setup and click on the middle button on Type.

Then go to Primary Graphic Image then click the box on Source.

Then select the image you want to use.

Search Modal Settings

Let's take a closer look at the settings available...

Setup

Use this control group to fine-tune the initial setup of the search modal.

Colors

Use this control group to set the background and search color of the search modal.

Modal Content Padding

Use this option to set the padding of the modal content. You can change the settings for all the sides of the modal content or modify them individually.

Modal Content Border

Use this option to set the border of the modal content. You can set the style, width and color of the border on all sides or each side individually.

Modal Content Border Radius

Use this option to set a border radius for the modal content. You can set the curve on all sides or set them individually.

Modal Content Box Shadow

You can set a shadow over the modal content using the box-shadow control group.

• X-Offset - Use this option to set the X offset of the shadow in the modal content.
• Y-Offset - Use this option to set the Y offset of the shadow in the modal content.
• Blur - Use this option to set the intensity of the blur effect in the modal content.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the modal content.
• Color - Use this option to set the color of the modal content shadow.

Search Input Settings

You can also configure the search form namely its text input and the search button. To view the input settings, simply click on the Search Tab.

For the Search Modal Element, what's considered as the Submit is the magnifying glass icon and the Input is the textbox where you enter your search term.

It's important to make the distinction between the two because we'll quickly run through the settings available for both later.

Setup

When you're on the Search tab, you'll see a Setup field group that looks like this:

When you make adjustments to any of these, the entire search box (containing both the Submit and Input) will be affected. See an example below:

In that example, I changed the background color of the search form and its height.

Content

In the Content tab, you'll be able to change the text for the input rather than just having it say "Seach."

Input Placement refers to where the Input should be located while Submit Placement refers to there the submit button should be located.

Other settings such as Margin, Border, Border Radius and Box Shadow are similar in concept to settings we discussed earlier on Modal Settings.

Input Margin / Text Format / Style

Input Margin, Input Text Format and Input Style all allow you to configure the input textbox.

Want to make the text all caps? You can change it using the Text Decoration setting under Input Text Style. Want to change the Font Family and Font size? That's easy, just go to Input Text Formatand make the changes there.

Possibilities are virtually endless.

Submit

Want to change the size, color and margins of the Submit button? Something like this one below?

Then the settings such as Submit Setup, Submit Margin, Submit Border, Submit Border Radius and Submit Box Shadow are available to you.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

• ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
• Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
• Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
• Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
• Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.

Demo

To see a live demo of the Search Modal Element click here.

Summary

In this article, you've learned enough of the settings available to you on the Search Modal element. While we didn't dive in great detail to every option, you know enough to get started using this element and to customize it to your liking.