nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customizing font size and boldness for locator placeholder text in Zone Lookup App

HenriettaK

Hello Instant Apps Community!

I have built an instant app using the Zone Lookup template and have rolled it out for testing to the organization. A lot of the feedback has been about bolding the placeholder text in the address search bar or somehow making the search bar larger. The app currently looks like this:

Is there a way to bold or increase the font size of the geolocator placeholder text that reads "Find address or place"?

Also, is there a way to increase the size of the address search bar?

Thank you so much and I appreciate any help!

Finde mehr Beiträge mit dem Tag

Zonenabfrage

Accepted answers

khutchins

You can increase the font size and bold the text by adding the following to the custom CSS config option:

.esri-search__form .esri-input[type=text] {
    font-size: 22px;
    font-weight: bold;
}

All comments

khutchins

You can increase the font size and bold the text by adding the following to the custom CSS config option:

.esri-search__form .esri-input[type=text] {
    font-size: 22px;
    font-weight: bold;
}

Russell_Provost

Is this CSS config option no longer available in the latest update? My app doesn't seem to be responding to this override.

khutchins

You can definitely still make css changes but its a bit trickier now because the apps use components encapsulate some of the styling and that can make it harder to make updates. But you can modify the placeholder color and update the font size and weight. Here's an example that should work for Zone Lookup

.search-panel{
calcite-autocomplete{
    --calcite-autocomplete-input-placeholder-text-color:#ff00ff;
     --calcite-font-weight-normal:900;
     --calcite-font-size-relative-base:1.2em;
}
}

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.