Change the width in Search Widget

318
3
Jump to solution
05-06-2019 05:52 AM
WwLl
by
New Contributor II

Hey, 

When i change the width on this css file "WebAppBuilderForArcGIS\client\stemapp\widgets\Search\setting\css"   

This happens:

It should look like this, but with an increased width:

Is it the right file to change the search widget width?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Actually the css rule will not allow proper adjustment of the widgets width, because it is set in the widget.js code. Change all your css changes back to original and then make this change in the widget.js file.

      // use for small screen responsive
_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)
...

Line 11 change the 274 value there to your choice.

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

You need to increase the .searchInputGroup parent element as well.

0 Kudos
WwLl
by
New Contributor II

sry when i ask this, but what exactly do u mean?

 

the blue arrows shows where i change the width size

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Actually the css rule will not allow proper adjustment of the widgets width, because it is set in the widget.js code. Change all your css changes back to original and then make this change in the widget.js file.

      // use for small screen responsive
_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)
...

Line 11 change the 274 value there to your choice.

View solution in original post