Anpassen der Formatierung von Platzhaltertext mit dem benutzerdefinierten CSS in der Vorlage "Zonensuche" in ArcGIS Instant Apps

Zusammenfassung

In ArcGIS Instant Apps bieten vordefinierte Designs eine unkomplizierte Möglichkeit, zweckgerichtete Apps für Interaktionen mit Karten und Daten zu erstellen. Für eine bessere User Experience ist es manchmal notwendig, die Schriftgröße und -breite des Platzhaltertextes in der Suchleiste mithilfe von benutzerdefiniertem CSS zu ändern, um das Aussehen der App, einschließlich der Schriftarten, zu steuern. Diese Verbesserung sorgt für eine bessere Lesbarkeit und einheitliche Gestaltung. Weitere Informationen finden Sie unter ArcGIS Instant Apps: Ändern von Design und Layout. Die Abbildung unten zeigt die standardmäßige Schriftgröße und -breite des Platzhaltertextes in der Suchleiste in der Vorlage "Zonensuche" in ArcGIS Instant Apps.

In diesem Artikel wird der Workflow zum Ändern der Schriftgröße und -breite des Platzhaltertextes in der Suchoption der Vorlage "Zonensuche" in ArcGIS Instant Apps mithilfe von benutzerdefiniertem CSS beschrieben.

Vorgehensweise

1. Melden Sie sich bei ArcGIS Instant Apps an, und klicken Sie auf die Registerkarte Eigene Apps.
2. Navigieren Sie zur App, und klicken Sie auf Konfigurieren .
3. Deaktivieren Sie im Konfigurationsfenster die Umschaltfläche Express, um auf die vollständigen Konfigurationseinstellungen für die App zuzugreifen.

4. Klicken Sie im Fenster Express-Modus deaktivieren auf Weiter. Durch das Deaktivieren des Express-Modus können benutzerdefinierte Konfigurationen in der App vorgenommen werden.

5. Klicken Sie auf Design und Layout, und klicken Sie auf Design.

Note: 
Optionally, click Search settings and type Custom CSS. The Theme & Layout panel is displayed.

6. Klicken Sie unter Design im Abschnitt Benutzerdefiniertes CSS auf Bearbeiten.

Warning:  
ArcGIS Instant Apps updates for the source template may impact an app's custom CSS.

7. Fügen Sie im Fenster Benutzerdefiniertes CSS den folgenden CSS-Code ein, um die Schriftgröße und -breite des Platzhaltertextes in der Option "Suchen" zu ändern. Die Parameter "font-size" und "font-weight" können angepasst werden. In diesem Beispiel beträgt die Schriftgröße 24 px, und die Schriftbreite ist fett.

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

8. Klicken Sie auf Schließen, um den CSS-Code auszuführen.
9. Klicken Sie auf Veröffentlichen, um die Konfiguration zu speichern.

Die Abbildung unten zeigt die angepasste Schriftgröße und -breite des Platzhaltertextes in der Suchleiste in der Vorlage "Zonensuche" in ArcGIS Instant Apps.