topic Re: Change Search Widget Text in CSS? in ArcGIS JavaScript Maps SDK Questions

Change Search Widget Text in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 21:57:33 GMT

How can I change "Find address or place" to "search" in the CSS? Can I override Esri's main.css file?

I put in "content: 'search;'" here. There was no change.

Here's where it seems to be in one of my CSS files.

@media (max-width: 480px)
.esri-input.esri-search__input {
    visibility: visible;
    font-size: 12px;
    margin-right: 0px;
}‍‍‍‍‍‍

I tried this but there was no change:

content: "search" !important;‍

Re: Change Search Widget Text in CSS?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:57:36 GMT

Jared,

You can not do this using css. You have to do this in JS code.

require(["dojo/i18n!esri/nls/jsapi"], function(b) {
  b.widgets.Search.main.allPlaceholder = "blah blah";
});‍‍‍

You can add this to the Search widget.js startup function.

Re: Change Search Widget Text in CSS?

RobertScheitlin__GISP — Mon, 29 Oct 2018 12:08:02 GMT

Jared,

Did this work for you?

Re: Change Search Widget Text in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 21:57:39 GMT

Robert,

I haven't got it to work yet. I incorporated what you had, but there's something wrong with the script somewhere. The app isn't showing the search box among other things.

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Search",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "dojo/i18n!esri/nls/jsapi",
        "dojo/domReady!"
      ],
      function (
        Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand, b
      )

        //search widget
        var searchWidget = new Search({
          view: view,
          container: "searchDiv",
          index: 2
          b.widgets.Search.main.allPlaceholder = "search";
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

EDIT: Here's the search elements in the body.

    <div id="searchParentDiv" style="float:right;">
      <div id="searchDiv" style="float:right;"></div>
    </div>‍‍‍

Re: Change Search Widget Text in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 21:57:44 GMT

Here's the whole script as it stands now.

<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Will County Attractions</title>

  <!--links to external css and Esri api-->
  <link rel="stylesheet" href="splash.css">
  <link rel="stylesheet" href="attractions.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>

  <!--JavaScript beginns-->
  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Search",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "dojo/i18n!esri/nls/jsapi",
        "dojo/domReady!"
      ],
      function (
        Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand, b
      ) { 

        //set basemap
        var map = new Map({
          basemap: "topo-vector",
        });

        //set map view
        var view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 1300000,
          center: [-87.95, 41.47],
          //popup settings for attractions layer
          popup: {
            dockEnabled: true,
            dockOptions: {
              //set dock/undock button from on pop-up
              buttonEnabled: false,
              //ignore the default sizes that trigger responsive docking
              breakpoint: false,
            }
          }
        });

        //***widgets***
        //home widget
        var homeBtn = new Home({
          view: view,
        });
        view.ui.add(homeBtn, "top-left");

        //search widget
        var searchWidget = new Search({
          view: view,
          container: "searchDiv",
          index: 2
          b.widgets.Search.main.allPlaceholder = "search";
          });
        

        //legend widget
        var legend = new Expand({
          content: new Legend({
            view: view,
            //style: "card"
          }),
          view: view,
          expanded: false
        });
        view.ui.add(legend, "top-left");

        //***popups***
        //popup template
        var template = { //autocasts the new template
          title: "<img src={logo} height='50' width='50'><font color= '#008000' font size= '3px'>{Name}",
          content: [{ //set content elements in the order to display
            type: "fields",
            fieldInfos: [{
              fieldName: "Type",
              label: "Type",
              visible: true,
            }, {
              fieldName: "Address",
              label: "Address",
              visible: true,
            }, {
              fieldName: "Website",
              label: "Website",
              visible: true,
            }, {
              fieldName: "Photo",
              label: "Photo",
              visible: false,
            }]
          }, {
            // You can set a media element within the popup as well. This
            // can be either an image or a chart. You specify this within
            // the mediaInfos. Similar to text elements, media can only be set within the content.
            type: "media",
            mediaInfos: [{
              type: "image",
              value: {
                sourceURL: "{Photo}"
              }
            }]
          }]
        };
        //set Rt 66 photo in popup
        var template2 = { //autocasts the new template
          title: "<font size= '3px' font color= '#008000'>Route 66",
          content: [{ //set content elements in the order to display
            type: "fields",
            fieldInfos: [{
              fieldName: "Photo",
              label: "Photo",
              visible: false,
            }]
          }, {
            type: "media",
            mediaInfos: [{
              type: "image",
              value: {
                sourceURL: "{Photo}"
              }
            }]
          }]
        };
        //set I&M canal photo in popup
        var template3 = { //autocasts the new template
          title: "<font size= '3px' font color= '#008000'>Illinois & Michigan Canal",
          content: [{ //set content elements in the order to display
            type: "fields",
            fieldInfos: [{
              fieldName: "Photo",
              label: "Photo",
              visible: false,
            }]
          }, {
            type: "media",
            mediaInfos: [{
              type: "image",
              value: {
                sourceURL: "{Photo}"
              }
            }]
          }]
        };

        //***feature layers***
        //add will county boundary
        var boundary = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/County_Limits/FeatureServer/0?token=yM_YxXpVn38Dir9j6MRvcz3cvEAXYr9xLwp79OTcBP9VHu_Xy6tftzewVd-a5J7ufeUZXyzLuv9QggdIFDgPGiI0yYbHiYc_0y9Yzuc-kxglDfuDzhbl5wF-ZYQPiGRl3wssCXMT1rXUMjxyJXsDMKUoOy1PrgJmzk-XgrkNu-H8Hv3WGhahXiehU0n2Dk4l3RpPc0fs4bbSG8hGP5dcl30whsg3cpG3CtFseegv4kge4WhxkjuYs8umMxleGzYr",
          //id: "boundary",
        });
        map.add(boundary);

        //add Rt 66
        var rt66 = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Rte_66/FeatureServer/0?token=xWHh8zKgamTMcroCxiE7AQbskmQ3_xo9xvkuxqS4opeVjboyOLCBVF_X-07v1MUHXfzB8eipB72cdUeFgicDZZR2tkk27yuo15QdnknRJaqh1rGU0XUjzwm7r3-ICbGfdyuQhitU8zI_je0RfnKDlMkgHeyKCFbcCCqGw4bb3x0TjB0P0yEth4yVNbRIAla8Pp8nnW-YBKcUWNl-dMZXG0N1OpbsD_BmtwZ_EZ_piSSyBTgFCA4DywH9r0SIKEzS",
          // id: "rt66",
          popupTemplate: template2,
          outFields: ["*"]
        });
        map.add(rt66);

        //add canal
        var canal = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Illinois_and_Michigan_Canal/FeatureServer/0?token=saZNZop-3O7ZpTob147oHVUv7fVo9SntOUafwdgNf0gutXW2RYRP8q9TawAILOtVGPZDOwEK-wajGVtUOugqGMw4nfGoRfwHW1KoIPkthtC6CBAG7RPuCMqAFYmS1SCm8F1_4mv9Z_EM8y74Qaf1g62ujJrSslPuUTxkEdEYDhY9EB4wJkEARGlarw2k9iWFpMS5PPKBMNVaYDYMN7ak9d-1Qu9C_pckMtNc_Hbdjkkbt2xijQWJMKmqgK6nJrrQ",
          popupTemplate: template3,
          //id: "canal",
        });
        map.add(canal);

        //add preserves
        var preserves = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Forest_Preserves/FeatureServer/0?token=PlThkEXvgHjgFl78dz4yPzYZtkRZA2WzsigDa1Ndd1-H7eSrko_OXuP90_rLhOtdTZGDPfs1pauVuhbmPiJTT9SBA1FViJc-UgfTOzocH5qJW6cxSfyS7vwXjw0NPCJJ2TP47F4VEIJktUZv7HmILjxUVGVbAA6M4WoUxUBZynGiAA25AgGwjAQhigP1sypK3yzzITSRA8TpDf0DrvXE2fGv3aVTWMeAa3hblHqU1R71lfKgtwXna200qkJnWGoN",
          //id: "preserves",
          //zoom: 1,
        });
        map.add(preserves);

        //add attraction feature layer
        //reference the popup template instance in the popuptmeplate property of featurelayer
        var attractions = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs",
          id: "attractions",
          visible: true,
          popupTemplate: template,
          outFields: ["*"]
        });
        map.add(attractions);

        //***From here down deals with the query by type dropdown menu***
        var attTypeSelect = document.getElementById("attractions");
        view.ui.add("infoDiv", "left");
        //query all features from the attractions layer
        view.when(function () {
            return attractions.when(function () {
              var query = attractions.createQuery();
              return attractions.queryFeatures(query);
            });
          })
          .then(getValues)
          .then(getUniqueValues)
          .then(addToSelect);

        // return an array of all the values in the
        // Type field of the attractions layer
        function getValues(response) {
          var features = response.features;
          var values = features.map(function (feature) {
            return feature.attributes.Type;
          });
          return values;
        }

        // return an array of unique values in
        // the Type field of the attractions layer
        function getUniqueValues(values) {
          var uniqueValues = [];

          values.forEach(function (item, i) {
            if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
              (item !== "")) {
              uniqueValues.push(item);
            }
          });
          return uniqueValues;
        }

        // Add the unique values to the attractions type
        // select element. This will allow the user
        // to filter attractions by type.
        function addToSelect(values) {
          values.sort();
          values.forEach(function (value) {
            var option = document.createElement("option");
            option.text = value;
            attTypeSelect.add(option);
          });

          return setattractionsDefinitionExpression(attTypeSelect.value);
        }

        // set the definition expression on the attractions
        // layer to reflect the selection of the user
        function setattractionsDefinitionExpression(newValue) {
          attractions.definitionExpression = "Type = '" + newValue + "'";
          if (!attractions.visible) {
            attractions.visible = true;
          }

          return queryForAttractionGeometries();
        }

        // set a new definitionExpression on the attractions layer
        attTypeSelect.addEventListener("change", function () {
          var type = event.target.value;
          setattractionsDefinitionExpression(type);
        });

        // Get all the geometries of the attractions layer
        // the createQuery() method creates a query
        // object that respects the definitionExpression
        // of the layer
        function queryForAttractionGeometries() {
          var attractionsQuery = attractions.createQuery();
          return attractions.queryFeatures(attractionsQuery)
            .then(function (response) {
              attractionsGeometries = response.features.map(function (feature) {
                return feature.geometry;
              });
              return attractionsGeometries;
            });
        }
      }
    )
  </script>

</head>

<body>
  <header class="app_header">
    <img src="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png" alt="GIS Seal" style="float:left;width:48px;height:46px;"
      color='#f5f5dc'>
    <div id="searchParentDiv" style="float:right;">
      <div id="searchDiv" style="float:right;"></div>
    </div>
    <div class="a">
      <h1 class="local">Will County Attractions</h1>
    </div>
  </header>
  <div id="infoDiv">
    Select type:
    <select id="attractions"></select>
  </div>
  <div id="viewDiv"></div>
  <!--Splashscreen***-->
  <div class="overlay-wrap">
    <input type="checkbox" name="hide" id="hide">
    <label class="hide" for="hide">Explore Map</label>
    <div class="overlay2">
      <div class="overlay">
        <div class="overlay-inner">
          <div class="message">
            <h1>Will County Attractions</h1>
            <p>
              <h3>This map highlights the many things to do in Will County, IL.
                What you will find is parks, places of historical significance, sporting events, nature preservs and
                museums. Please note that this may not be a complete listing
                and some locations may have restricted use and/or limited hours. All information is subject
                to change.</h2>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--***-->
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change Search Widget Text in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 21:57:47 GMT

I guess I should post the CSS too. The other CSS file (splash.css) you see referenced in the script doesn't haven't any search elements.

    html,
    body,
    #viewDiv {
        overflow: hidden;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    #viewDiv {
        height: calc(100% - 75px);
    }

    /*search*/

    #searchParentDiv {
        height: 100%;
    }

    /*search*/
    .esri-search {
        border: none;
        margin-top: 7px;
        margin-right: 5px;
    }

    div.a {
        /* center the header*/
        text-align: center;
    }

    /* Style the header */

    header.app_header {
        background-color: beige;
        padding: 2px;
        font-size: 12px;
        font-family: 'Sans Serif';
        color: black;
        max-height: 50px;
    }

    /*legend*/

    .esri-legend.esri-widget--panel.esri-widget {
        max-height: 600px;
        max-width: 600px;
    }

    /*.esri-expand__mask.esri-expand__mask--expanded {
      max-height: 0px;
    }*/

    .esri-legend__layer-caption {
        display: none;
    }

    /*query dropdown*/

    #infoDiv {
        background-color: black;
        color: white;
        font-family: 'Sans Serif';
        padding: 2px;
        width: 100%;
    }

    /*query*/
    #results {
        font-weight: bolder;
    }

    /*this section is for mobile devices*/
    @media (max-width: 480px) {
        h1 {
            font-size: 14px;
            visibility: visible;
            z-index: 2
        }

        header {
            width: 420px;
            height: 100px;
        }

        #infoDiv {
            font-size: 14px;
            font-family: 'sitka';
            padding: 2px;
        }

        /*popuptemplate*/
        .esri-popup__main-container.esri-widget {
            width: 300px !important;
            max-height: 350px !important;
        }

        .esri-popup__header {
            height: 100px;
            max-width: 300px;
            background-color: beige;
        }

        /*search*/

        #searchParentDiv {
            height: 100%;
        }

        /*search*/
        .esri-search {
            border: none;
            margin-top: 7px !important;
            margin-right: 53px !important;
        }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change Search Widget Text in CSS?

CarsonPruitt1 — Fri, 10 Dec 2021 21:57:50 GMT

You need to set the allPlaceholder property. There's no CSS involved.

        //search widget
        var searchWidget = new Search({
          view: view,
          container: "searchDiv",
          index: 2,
          allPlaceholder = "search"
          });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change Search Widget Text in CSS?

RobertScheitlin__GISP — Tue, 30 Oct 2018 01:00:32 GMT

Jared,

My example code was for changing the search widgets all place holder sting in the 3.x API. In the 4.x API somethings are a lot easier and can be done in the constructor as Carson mentions. Here is the documentation reference:

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#allPlaceholder

Re: Change Search Widget Text in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 21:57:53 GMT

Robert,

Using the snippet you gave me as such is throwing two syntax errors:

It says there should be a colon between b and widgets and there should be a comma at the end instead of a semi-colon. Even then the app wasn't displaying anything.

        //search widget
        var searchWidget = new Search({
          view: view,
          container: "searchDiv",
          index: 2,
          b:widgets.Search.main.allPlaceholder = "search",
          });‍‍‍‍‍‍‍

Re: Change Search Widget Text in CSS?

JaredPilbeam2 — Fri, 10 Dec 2021 21:57:56 GMT

Carson,

There's no error in the text editor, but the app isn't displaying any search box or anything in the MapView now.

Edit: The error from Google Chrome console, which is referring to your line 6:

attractions.html:69 Uncaught SyntaxError: Invalid shorthand property initializer‍‍‍‍‍

EDIT: Following the browser's recommendation to change the shorthand, I swapped

allPlaceholder = "search address"‍‍‍

for

allPlaceholder: "search address"‍‍‍

but then there were multiple errors in the console:

Is there something missing in the require section?

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Search",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "dojo/i18n!esri/nls/jsapi",
        "dojo/domReady!"
      ],
      function (
        Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand, allPlaceholder
      )‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change Search Widget Text in CSS?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:57:59 GMT

Jared,

Here is what I have tested and works for your scenario:

        //search widget
        var searchWidget = new Search({
          view: view,
          container: "searchDiv"
        });

        searchWidget.watch('activeSource', function(evt){
          evt.placeholder = "blah blah";
        });‍‍‍‍‍‍‍‍‍

Re: Change Search Widget Text in CSS?

CarsonPruitt1 — Fri, 10 Dec 2021 21:58:02 GMT

You don't have anything missing -- you have too much.

"dojo/i18n!esri/nls/jsapi"

Needs to be removed. This is 3.x and you seem to be using 4.x based on the code you posted.

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Search",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "dojo/domReady!"
      ],
      function (
        Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand
      )

Re: Change Search Widget Text in CSS?

RobertScheitlin__GISP — Wed, 31 Oct 2018 02:30:57 GMT

Carson,

Actually the allPlaceholder property does not work in his case as he is not specifying any sources.

Re: Change Search Widget Text in CSS?

JaredPilbeam2 — Wed, 31 Oct 2018 14:40:52 GMT

Thank you both. Right, i'm working with 4.9. I had ArcGIS API for JavaScript 4.9 as a tag, not in the title, which might have been a better idea.

Anyway, I took out the

"dojo/i18n!esri/nls/jsapi"‍

and also removed the allPlaceholder element. That wasn't it.

@Robert,

How do you explain what you did there? Did you create an event based on the searchWidget?

Re: Change Search Widget Text in CSS?

RobertScheitlin__GISP — Wed, 31 Oct 2018 16:58:16 GMT

Jared,

In the code I am watching for the active source to be set and then set the place holder. 4.x does not really uses events much instead you watch properties.