Webappbuilder Search widget resize issue

1236
5
Jump to solution
05-25-2017 09:49 AM
Anish_Adhikari
Occasional Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor

Robert, many thanks as always. Worked great !!

0 Kudos
Sunita_Khanal
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
Sunita_Khanal
New Contributor II

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

0 Kudos