How to close search widget at start

[BrandonPrice]

I am using WAB Developer's tab theme. I have downloaded the script onto the server. Any suggestions? Screenshot below:

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=1d5a7555-3ac3-44cb...‌

[RobertScheitlin__GISP]

Brandon,

   The search widget is not a widget that can open and close by default so the issue would be how to open it back up if closed.

[BrandonPrice]

Thank you Robert. This makes more sense. I am going to investigate how to incorporate the search widget the story map uses since it is closeable.

[RobertScheitlin__GISP]

Brandon,

  So when you say closeable are you really wanting collapsed (just showing the magnifier button)?

[BrandonPrice]

Yes. That is what I want to do and then expand onclick.

[RobertScheitlin__GISP · Accepted solution]

Brandon,

  So I did some testing and the JS API search has the ability from the Search dijit to collapse like you are wanting, but the WAB has done something in their implementation that does not like when you set enableButtonMode on the search dijit in the WAB search widget.

[BrandonPrice]

Hello Robert:

Thank you for seeing if this was possible.

Brandon

[JosephDavies]

Hi Robert,

I am also trying to make the WAB search widget collapsable, but changing enablebuttonmode: true and expanded: false in the new Search constructor of the Widget.js file doesnt seem to work.

Are you aware of any kind of work-around?

Joe

[RobertScheitlin__GISP]

Brandon and Joe,

  So I did some digging and testing and here is what has to be changed.

In the Search Widget.js:

      _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)
        //     };
        //     var sourcesBox = html.getMarginBox(this.searchDijit.sourcesBtnNode);
        //     var submitBox = html.getMarginBox(this.searchDijit.submitNode);
        //     var style = null;
        //     if (box.w) {
        //       html.setStyle(this.searchDijit.domNode, 'width', box.w + 'px');
        //       html.addClass(this.domNode, 'use-absolute');
        //
        //       if (isFinite(sourcesBox.w) && isFinite(submitBox.w)) {
        //         if (window.isRTL) {
        //           style = {
        //             left: submitBox.w + 'px',
        //             right: sourcesBox.w + 'px'
        //           };
        //         } else {
        //           style = {
        //             left: sourcesBox.w + 'px',
        //             right: submitBox.w + 'px'
        //           };
        //         }
        //         var inputGroup = query('.searchInputGroup', this.searchDijit.domNode)[0];
        //
        //         if (inputGroup) {
        //           html.setStyle(inputGroup, style);
        //           var groupBox = html.getMarginBox(inputGroup);
        //           var extents = html.getPadBorderExtents(this.searchDijit.inputNode);
        //           html.setStyle(this.searchDijit.inputNode, 'width', groupBox.w - extents.w + 'px');
        //         }
        //       }
        //     }
        //   }
        // }), 50);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the style.css (Change auto to 212px !important;):

.jimu-widget-search .arcgisSearch .searchGroup .searchInputGroup .searchInput{
  width: 212px !important;
}‍‍‍‍‍‍‍

[JosephDavies]

Thanks Robert,

In addition to your changes I also had to remove all the .jimu-widget-search classes from 'themes\LaunchpadTheme\styles\default\css\launchpad.css' - which were messing with the esri.css styles