HOW TO

Customize the placeholder text formatting using the Custom CSS in the ArcGIS Instant Apps Zone Lookup Template

Last Published: June 13, 2024

Summary

In ArcGIS Instant Apps, predefined themes offer a convenient way to create purpose-driven apps for interacting with maps and data. For a better user experience, it is sometimes necessary to change the font size and weight of the placeholder text in the search bar using custom CSS to control the appearance of the app, including fonts. This enhancement ensures improved readability and visual consistency. Refer to ArcGIS Instant Apps: Change theme and layout for more information. The image below shows the default font size and weight of placeholder text in the search bar in the ArcGIS Instant Apps Zone Lookup Template.

The default font size and weight of placeholder text in the search bar in the ArcGIS Instant Apps Zone Lookup Template

This article provides the workflow to change the font size and weight of the placeholder text in the Search option using custom CSS in the ArcGIS Instant Apps Zone Lookup Template.

Procedure

  1. Log in to ArcGIS Instant Apps and click My Apps tab.
  2. Browse to the app and click Configure The Configure button.
  3. In the configuration panel, toggle Express off to access the full configuration settings for the app.
The Express toggle in the configuration panel
  1. In the Turn off express mode window, click Continue. Turning off express mode allows for more custom configuration to be done on the app.
The Turn off express mode window
  1. Click Theme & Layout and click Theme.
The Theme & layout panel
Note: 
Optionally, click Search settings and type Custom CSS. The Theme & Layout panel is displayed.
  1. Under Theme, click Edit in the Custom CSS section.
The Custom CSS section in the Theme panel
Warning:  
ArcGIS Instant Apps updates for the source template may impact an app's custom CSS.
  1. In the Custom CSS window, paste the following CSS code to change the font size and weight of the placeholder text in the Search option. The 'font-size' and 'font-weight' parameters are customizable. In this example, the font-size is 24px and font-weight is bold.
.esri-search__form .esri-input[type=text] {
  font-size: 24px;
  font-weight: bold;
}
  1. Click Close to run the CSS code.
  2. Click Publish to save the configuration.

The image below shows the customized font size and weight of the placeholder text in the search bar in the ArcGIS Instant Apps Zone Lookup Template.

The customized font size and weight of the placeholder text in the Search bar in the ArcGIS Instant Apps Zone Lookup Template

Article ID: 000032715

Software:
  • Configurable Web Apps

Receive notifications and find solutions for new or common issues

Get summarized answers and video solutions from our new AI chatbot.

Download the Esri Support App

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options