topic Re: TOC v2.5 - shrinking space between layers? in ArcGIS Viewer for Flex Questions

TOC v2.5 - shrinking space between layers?

ChristinaLaurier — Fri, 08 Jun 2012 19:04:35 GMT

Hi,

I am trying to shrink the layers in the TOC so that they are closer together.
In a previous version of the layerListWidget we accomplished this with the property -- verticalgap/gap="-1"

In the TOC I have changed a few of the gap properties to -1; however, there is no change.

=============================================================================================
<viewer:WidgetTemplate id="wTemplate"
         height="300"
         skinClass="com.esri.viewer.skins.WidgetTemplateSkin"
         width="400">
<s:Label styleName="AboutDescription" text="{descriptionLabel}" paddingTop="220"/>
<s:VGroup id="showTOC"
      visible="true"
      gap="-1"
      height="85%"
      paddingTop="4"
      width="100%">
   <s:Label styleName="WidgetText" text="{layerVisibility}" paddingLeft="6"/>
   <s:Scroller id="scr" width="100%" height="100%">
    <s:Group>
     <s:layout>
      <s:VerticalLayout gap="-1"/>
     </s:layout>
     <s:HGroup id="boxMessage"
         width="100%"
         includeInLayout="false"
         visible="false"
         verticalAlign="middle"
         horizontalAlign="center">
      <mx:Image id="swfMessage"
          source="widgets/TOC/assets/images/loader.swf"/>
      <s:Label id="txtMessage"
         width="90%"
         text="{GeneratingLegendMsg}"/>
     </s:HGroup>
     <toccomp:TOC id="toc"
         width="100%"
         height="100%"
         labels="{[ZoomToMakeVisible,ExpandAll,CollapseAll]}"
         useesridescription="{UseNewEsriDescrption}"
         expanded="{expanded}"
         fullexpanded="{fullexpand}"
         legendCollapsed="{legendCollapsed}"
         liveScrolling="false"
         variableRowHeight="true"
         tocMinWidth="{wTemplate.width - 45}"
         scroller="{scr}"
         loader="{boxMessage}"
         gap="-1" />
    </s:Group>
   </s:Scroller>
</s:VGroup>
</viewer:WidgetTemplate>
=============================================================================================

Re: TOC v2.5 - shrinking space between layers?

RobertScheitlin__GISP — Sun, 10 Jun 2012 11:38:43 GMT

Christina,

In the TocItemRenderer.as find this block of code in the set data function and make the addition indicated:

            if (!_vbox)             {                 _vbox = new VBox();                 _vbox.setStyle("verticalGap", -1)                 _vbox.mouseEnabled = _vbox.mouseChildren = false;                 addChild(_vbox);             }

Also in the TOCWidget.mxml you can make this change, if you are really want to remove all extra padding:

                    <toccomp:TOC id="toc"                                  width="100%"                                  height="100%"                                  labels="{[ZoomToMakeVisible,ExpandAll,CollapseAll]}"                                  useesridescription="{UseNewEsriDescrption}"                                  expanded="{expanded}"                                  disableZoomTo="{disableZoomTo}"                                  fullexpanded="{fullexpand}"                                  legendCollapsed="{legendCollapsed}"                                  liveScrolling="false"                                  variableRowHeight="true"                                  tocMinWidth="{wTemplate.width - 45}"                                  scroller="{scr}"                                  loader="{boxMessage}" paddingTop="0" paddingBottom="0"/>

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow the steps as shown in the below graphic:

Re: TOC v2.5 - shrinking space between layers?

ChristinaLaurier — Wed, 13 Jun 2012 15:24:51 GMT

Awesome,

Thanks again Rob!

Re: TOC v2.5 - shrinking space between layers?

leecollier — Wed, 31 Oct 2012 14:03:39 GMT

I am trying to reduce the vertical gap between layers in the ESRI LayerList widget.

Tina in you post you say "In a previous version of the layerListWidget we accomplished this with the property -- verticalgap/gap="-1"

Was this the ESRI widget and if so where did you put this property ?

Cheers