Search Inline

In this article, we're going to discuss how to use the Search Inline Element in the Pro Builders and in Cornerstone.

  1. Search Setup
  2. Search Design Settings
  3. Search Input Settings
  4. Search Submit Settings
  5. Search Clear Icon Settings
  6. Customize
  7. Demo
  8. Summary

Unlike the Search Modal Element that displays the search form only when the modal popup is visible, the Search Inline Element directly embeds the search form within the page.

See the image below to see how the Search Inline looks:

Search Inline Example

To add this element, simply search "Search" and select Search Inline.

Search Inline Element

Search Setup

The basic setup of settings of the Search Inline field includes the Setup and Content field groups.

Search Inline Setup

Setup

Setup includes the following fields:

  • Base Font Size - This is the basis of the font size. Changing this will change the size of the * Submit (the magnifying glass icon), the Input text, and the Clear icon. As an example, I changed the value for this field to 2EM and you'll see everything changed.
Search Inline Example
  • Width - Obviously dictates how wide the search form will be. You can set it by pixel, percentage, REM and EM.
  • Height - This is where you set how tall the form will be.
  • Max Width - The maximum width of the form. This is useful for responsiveness.
  • Background - There are two color pickers here. First, on the left, is the default color called * Base. This is the default background color. The second, the Interaction color is the background color of the form when the cursor is in it.

NOTE: When I use the term "form" I'm referring to this:

Search Inline Form Example

Content

Search Inline Form Elements
  • Placeholder
  • Input Placement
  • Submit Placement
  • Clear Placement

Search Design Settings

Margin

Search Inline Margin

Border

Search Inline Border

Border Radius

Search Inline Border Radius

Box Shadow

Search Inline Box Shadow

Search Input Settings

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

Search Inline Input Settings

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 Format and make the changes there. Possibilities are virtually endless.

Search Submit Settings

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

Search Inline Submit Example

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

Search Inline Submit Settings

Search Clear Icon Settings

Just as you can configure the design of both the search form, submit button and search input textbox, you can also configure the Clear Icon.

Here's an example of a configured Clear Icon:

Search Inline Clear Icon Example

The settings available are the following: Setup (where you set the size, color, background color etc), Margin, Border, Border Radius and Box Shadow.

Customize

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

Image Customize
  • 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.
Custom Attributes

Demo

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

Summary

Now you know how to use the Search Inline Element and how to configure its elements like the search button, the input text and clear icon to achieve the look you want.

See something inaccurate? Let us know