Webappbuilder Search widget resize issue

[Anish_Adhikari]

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.

[RobertScheitlin__GISP · Accepted solution]

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;
}‍‍‍

[Anish_Adhikari]

Robert, many thanks as always. Worked great !!

[Sunita_Khanal]

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

[RobertScheitlin__GISP]

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?

[Sunita_Khanal]

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