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.
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.