topic Re: Set Width of dijit FilteringSelect on a Custom Widget in ArcGIS Web AppBuilder Questions

Set Width of dijit FilteringSelect on a Custom Widget

DanJensen — Mon, 30 Mar 2015 17:47:28 GMT

I have added a dijit filtering select to a custom widget. With out any additional work, it is not wide enough for the data it displays. What is the easiest way to set the width of a control added to a custom widget?

Thanks,

-Dan

Re: Set Width of dijit FilteringSelect on a Custom Widget

RobertScheitlin__GISP — Mon, 30 Mar 2015 17:54:14 GMT

Dan,

Assign the control and id or a class and set the width in css.

Re: Set Width of dijit FilteringSelect on a Custom Widget

DanJensen — Mon, 30 Mar 2015 18:12:43 GMT

Okay. That being the best way, here is my second question. How do you correctly code it?

Here is my failed attempt.

in Widget.html

in demo\css\style.css

.jimu-widget-demo #myDemoInput { width: 150px;}

Re: Set Width of dijit FilteringSelect on a Custom Widget

RobertScheitlin__GISP — Mon, 30 Mar 2015 18:25:32 GMT

Dan,

I probably should not have recommended using id as id is the least desirable of the options...

So is the base class of your widget "jimu-widget-demo"?
Is there any other class assigned to your FilteringSelect div?

Here is an example of one of my FilteringSelect in a widget:

You can also specify the width in the style property of the actual html element.

Re: Set Width of dijit FilteringSelect on a Custom Widget

DanJensen — Mon, 30 Mar 2015 20:25:02 GMT

Robert Scheitlin, GISP wrote:
Dan,
I probably should not have recommended using id as id is the least desirable of the options...
So is the base class of your widget "jimu-widget-demo"?
Is there any other class assigned to your FilteringSelect div?
Here is an example of one of my FilteringSelect in a widget:
<div data-dojo-attach-point="stringCodedValuesFS" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props='searchAttr:"name",required:true,intermediateChanges:true' class="dijit-form-FilteringSelect" style="display:none;width:100%;height:25px;"></div>
You can also specify the width in the style property of the actual html element.

Yes
No, at least not by me.

I have been trying to use your example, but it does not show up as a filteringSelect. It is just a blank line in the widget. Also, I have no clue how you are setting the Store attribute on the filteringSelect. I know code below does not work since html is not defined in my code. I could not find how to instantiate it in any of the ESRI widgets.

html.setStyle(this.stringCodedValuesFS, {

store: empNameStore

});

New code still fails.

Widget.html

<div>

</div>

style.css

.jimu-widget-demo .wideInput{

width: 250px;

}

-Dan

Re: Set Width of dijit FilteringSelect on a Custom Widget

RobertScheitlin__GISP — Mon, 30 Mar 2015 20:33:29 GMT

Dan,

You are going to have to study up an get up to speed with templated dijits in dojo. When you add a html element in the widget.html (which is the widgets template) there is a property called "data-dojo-attach-point" this is how you get a reference to the component in your widget.js code.

Be sure that you have a require in your widget.js code for the dijit/form/FilteringSelect.

Re: Set Width of dijit FilteringSelect on a Custom Widget

DanJensen — Wed, 01 Apr 2015 18:50:27 GMT

Turns out using css and the data-dojo-attach-point did NOT work in my case because I had followed the example of using filtering select from the dojo documentation. It creates the filtering select in javascript like this.

var filteringSelect;

filteringSelect = new FilteringSelect({

id: "stateSelect",

name: "state",

store: stateStore,

autoComplete: true,

value: "CA",

searchAttr: "name"

}, "stateSelect").startup();

I had to add the style property inside the brackets to see a change, like this:

style: "width: 100%"

Nothing else worked.