4x: How to manually place an Expand in its container?

DirkVandervoort

&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; view<SPAN class="punctuation token">:</SPAN> view
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> expand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-search"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; content<SPAN class="punctuation token">:</SPAN> searchWidget
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp; view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>expand<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"manual"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

By default the Expand gets placed in the upper-left corner, flush with the content of the container. I want to place the Expand someplace else (e.g., flush with the left side of the container, 300px from the top). I assume I can do it in a style, however I cannot create a class and set the location properties of the class.  I can a handle on the element. I can inspect it in the debugger. But I cannot change the location properties of the element.

Any help please. A clue. Anything...

RobertScheitlin__GISP

Dirk,

   I am having a hard time with this as well. If you are only going to use one expand widget then you can simply use this css rule:

<SPAN class="selector token">.esri-expand</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 400px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

But the issue is when you need more than one.

The Widget class says it have a "id" property

The unique ID assigned to the widget when the widget is created

So I though I could assign that and then use a css rule with that id but I never see the id applied to the widget.

Maybe Matt can shead some light on this.

MDriscoll-esristaff‌