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
Solved! Go to Solution.
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.
Dan,
Assign the control and id or a class and set the width in css.
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
<input id="myDemoInput">
in demo\css\style.css
.jimu-widget-demo #myDemoInput { width: 150px;}
Dan,
I probably should not have recommended using id as id is the least desirable of the options...
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.
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.
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>
<input id="empNameSelect" class="wideInput" style="width: 200px">
</div>
style.css
.jimu-widget-demo .wideInput{
width: 250px;
}
-Dan
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.
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.