How to close search widget at start

640
15
Jump to solution
03-27-2018 08:15 AM
BrandonPrice
Occasional Contributor

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...

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

0 Kudos
15 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
BrandonPrice
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Brandon,


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

0 Kudos
BrandonPrice
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
BrandonPrice
Occasional Contributor

Hello Robert:

Thank you for seeing if this was possible.

Brandon

0 Kudos
JosephDavies
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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 

0 Kudos