topic Re: Trying to customize the Select Widget HTML in ArcGIS Web AppBuilder Questions

Trying to customize the Select Widget HTML

NickHarvey — Sun, 12 Dec 2021 00:50:14 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Trying to customize the Select Widget HTML

RobertScheitlin__GISP — Tue, 08 Nov 2016 23:15:25 GMT

Nick,

The select widgets main viewstack view is set to position: relative where most widgets are not. You can likely overcome this by using position: absolute and setting the bottom property.

Re: Trying to customize the Select Widget HTML

NickHarvey — Fri, 11 Nov 2016 17:07:16 GMT

Thanks for the tip Robert - I did start playing around with the absolute top/bottom positions for .jimu-viewstack, jimu-viewstack .view, and .jimu-widget-select .layer-nodes. The change that worked best for making space at the bottom of the panel for me is below...Though I'm not sure if this is the right method...Visually it achieves how I want the panel to look.....But I am still unable to add a division (more content) in the widget.html that will insert somewhere in that 90x space..Not understanding what drives the order of appearance on the panel...If I could determine how to create an insertion point below the layer list (in the 90px space), I'd be in business....

.jimu-widget-select .layer-nodes { position: absolute; top: 65px; bottom: 90px; width: 100%; overflow: auto;‍‍‍‍‍‍‍‍‍

-Nick

Re: Trying to customize the Select Widget HTML

RobertScheitlin__GISP — Fri, 11 Nov 2016 18:37:23 GMT

Nick,

So now you add your new div to the html with absolute positioning and set the bottom property to 0.

Re: Trying to customize the Select Widget HTML

NickHarvey — Sun, 12 Dec 2021 00:50:17 GMT

Ok that has it, thanks....I set the position in the style.css.....Unless there is a way to do this directly in the widget.html (?)........I created the new div (below) in the Select Widget's widget.html.....

<div class="nickscontent"</div>
      <div>
      <br>
      <br>
      <p style="text-align: left; font-weight: bold">
      <p> Nick's Custom Content </p>
      </div>‍‍‍‍‍‍‍

Then added the lines (below) to the Select Widget's style.css

div.nickscontent {
     position: absolute;
     bottom: 0px;
    }‍‍‍‍

Thanks so much for your help!

-Nick

Re: Trying to customize the Select Widget HTML

RobertScheitlin__GISP — Fri, 11 Nov 2016 20:10:10 GMT

Nick,

In the css is the best.

Re: Trying to customize the Select Widget HTML

NickHarvey — Fri, 11 Nov 2016 20:13:21 GMT

ok thanks