topic Re: Change the width in Search Widget in Web AppBuilder Custom Widgets Questions

Change the width in Search Widget

WwLl — Mon, 06 May 2019 12:52:00 GMT

Hey,

When i change the width on this css file "WebAppBuilderForArcGIS\client\stemapp\widgets\Search\setting\css"

This happens:

It should look like this, but with an increased width:

Is it the right file to change the search widget width?

Re: Change the width in Search Widget

RobertScheitlin__GISP — Mon, 06 May 2019 13:08:19 GMT

You need to increase the .searchInputGroup parent element as well.

Re: Change the width in Search Widget

WwLl — Mon, 06 May 2019 14:29:43 GMT

sry when i ask this, but what exactly do u mean?

the blue arrows shows where i change the width size

Re: Change the width in Search Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:02:28 GMT

Actually the css rule will not allow proper adjustment of the widgets width, because it is set in the widget.js code. Change all your css changes back to original and then make this change in the widget.js file.

      // use for small screen responsive
      _resetSearchDijitStyle: function() {
        html.removeClass(this.domNode, 'use-absolute');
        if (this.searchDijit && this.searchDijit.domNode) {
          html.setStyle(this.searchDijit.domNode, 'width', 'auto');
        }

        setTimeout(lang.hitch(this, function() {
          if (this.searchDijit && this.searchDijit.domNode) {
            var box = {
              w: !window.appInfo.isRunInMobile ? 274 : // original width of search dijit
                parseInt(html.getComputedStyle(this.domNode).width, 10)
...‍‍‍‍‍‍‍‍‍‍‍‍‍

Line 11 change the 274 value there to your choice.