topic Re: Webappbuilder Search widget resize issue in ArcGIS Web AppBuilder Questions

Webappbuilder Search widget resize issue

Anish_Adhikari — Thu, 25 May 2017 16:49:31 GMT

I am trying to Customize the Search Widget on WAB Developer edition so that it shows all the text inside the Searchbox without cutting it off. So far when I changed the width property for mobile layout on config.json file, it works well on mobile devices. When I follow the same process, for Desktop Version by editing same property on the same config file, it does not seem to have any effect. I would appreciate any help.

For the mobile resizing I modified the mobilelayout property on config.json file as follows

{
"uri": "widgets/Search/Widget",
"position": {
"left": 7,
"top": 5,
"width": 305
},
"version": "2.3"
},

and it works well on mobile devices,

For the desktop layout, I followed the same process and changed width to 400 but it seems to have no effect, I also tried some modifications on Search widget's style.css file but I am not sure which property to modify.

Re: Webappbuilder Search widget resize issue

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:25:46 GMT

Anish,

Make the change like you have to the apps main config search widget width and then make this additional rule in the widgets style.css:

.arcgisSearch .searchGroup {
  width: 320px;
}‍‍‍

Re: Webappbuilder Search widget resize issue

Anish_Adhikari — Thu, 25 May 2017 21:46:29 GMT

Robert, many thanks as always. Worked great !!

Re: Webappbuilder Search widget resize issue

Sunita_Khanal — Thu, 25 Oct 2018 14:43:56 GMT

I am trying to change the width of Search Widget for Launchpad theme, mainly for mobile as the current width goes off the screen. I made the same changes in the config.json file for the mobile property as suggested in the above post and also made a change in the CSS file as suggested by robert, but it does not seem to have any effect on both mobile and desktop and I am not sure if there is any other code that I should be changing. I am using WAB 2.9. Any help would be highly appreciated.

Many thanks,

Sunita

Re: Webappbuilder Search widget resize issue

RobertScheitlin__GISP — Thu, 25 Oct 2018 15:03:42 GMT

Sunita,

Strange in my testing just now of WAB 2.9 Launchpad theme the search widget sizes just right and does not go off the screen. Could it be due to some change you already made to the theme?

Re: Webappbuilder Search widget resize issue

Sunita_Khanal — Thu, 25 Oct 2018 16:13:22 GMT

Robert,

Thank you for taking the time to test and I think you are right, I replace both the config and CSS file with the original file and made the changes in the code as suggested in the above post and it seems to be working fine.

Thanks so much again.

Sunita