AnsweredAssumed Answered

Trying to customize the Select Widget HTML

Question asked by nickharvey on Nov 8, 2016
Latest reply on Nov 11, 2016 by nickharvey

Hi All - I have customized all of my header controller widgets (foldable theme) with some content at the bottom of the panel (a help doc link for that widget, etc).  I have been able to add this content to every widget thus far...A simplified example of the LayerList widget.html code is available below (I have removed the links/images and just added some simple text; "My Custom Content").

 

<div>
  <div class="layers-section" data-dojo-attach-point="layersSection">
    <div class=" layer-list-title">${nls.titleLayers}</div>
    <div class="layer-list-body" data-dojo-attach-point="layerListBody">
    </div>
  </div>
  <div class="nickscustom-content" data-dojo-attach-point="nickcustomContentNode"></div>
      <div>
      <br>
      <br>
      <p style="text-align: left; font-weight: bold">
      <p> My Custom Content </p>
      </div>
</div>

 

So now I'm interested in implementing the WAB DE 2.2 Select Widget for our next rollout and have hit a snag.  I have been experimenting with adding the division to different lines of the widget.html to get the custom content to sink to the bottom of the panel, but thus far (when it does work) the content always floats to the top of the panel.  I have been speculating that the loading shelter set up is the cause, etc....But I'm clearly missing something fundamental here and thought I should ask...My last attempt is shown below...Any suggestions appreciated

 

-Nick

 

<div>
  <div class="layer-node" data-dojo-attach-point="layerListNode">
    <div>
      <div class="select-dijit-container" data-dojo-attach-point="selectDijitNode">
      </div>
      <div class="seperator"></div>
    </div>
    <div class="layer-nodes" >
      <div class="layer-items" data-dojo-attach-point="layerItemsNode"></div>
    </div>
  </div>
  <div class="details-node" data-dojo-attach-point="detailsNode">
    <div class="header">
      <div class="switch-back jimu-float-leading" data-dojo-attach-point="switchBackBtn">
        <div class="feature-action" data-dojo-attach-point="switchBackIcon"></div>
      </div>
      <div class="layer-name jimu-ellipsis" data-dojo-attach-point="selectedLayerName"></div>
    </div>   
  </div>
  <div data-dojo-attach-point="shelter" data-dojo-type="jimu/dijit/LoadingShelter" data-dojo-props='hidden:false'></div>
  <div class="nickscustom-content" data-dojo-attach-point="nickcustomContentNode"></div>
      <div>
      <br>
      <br>
      <p style="text-align: left; font-weight: bold">
      <p> My Custom Content </p>
      </div>
</div>

Outcomes