Set Width of dijit FilteringSelect on a Custom Widget

5081
6
Jump to solution
03-30-2015 10:47 AM
DanJensen
Occasional Contributor

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

0 Kudos
1 Solution

Accepted Solutions
DanJensen
Occasional Contributor

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.

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Dan,

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

DanJensen
Occasional Contributor

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;}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Dan,

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

  1. So is the base class of your widget "jimu-widget-demo"?
  2. 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.

DanJensen
Occasional Contributor

Robert Scheitlin, GISP wrote:

Dan,

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

  1. So is the base class of your widget "jimu-widget-demo"?
  2. 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.

  1. Yes
  2. 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>

  <input id="empNameSelect" class="wideInput" style="width: 200px">

</div>

style.css

.jimu-widget-demo .wideInput{

     width: 250px;

}

-Dan

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
DanJensen
Occasional Contributor

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.

0 Kudos