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
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.
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.
Robert Scheitlin, GISP wrote:
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.
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;
}
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;}
Assign the control and id or a class and set the width in css.
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.