nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Pop Up Spacing

SteveWhitehead__GISP

Does anyone know how to change the spacing between the field data in the Pop Up Widget from double spaced to single spaced?

I am finding my popup window is huge and takes up loads of unnecessary space in the application.

Najděte více příspěvků označených jako

Accepted answers

All comments

MattShetzer

That did the trick. Thanks for the help !
Matt

philippschnetzer

download the api from here:

http://help.arcgis.com/en/webapi/flex/index.html

In there you will find the PopUpRenderedSkin.mxml (arcgis_api_for_flex_2_5\ArcGIS_Flex\skins\src\com\esri\ags\skins\).

Take that file and put in in your project at (src/com/esri/viewer/skins) and then place this in your default.css:

esri|PopUpRenderer
{
 skinClass:ClassReference('com.esri.viewer.skins.PopUpRendererSkin');
}

FaizanTayyab

Apologies, it is PopUpRendererSkin not PopUpRenderer. Please use the instructions below to find the skin (provided by Robert on another thread).

The popup that is used in the Viewer is actually part of the Flex API, so the source for it is not in the Viewers project structure. That being said it is easy to add the API's PopUpRendererSkin.mxml to your Flex Viewer project so that you can modify it and have it used by your viewer app. All you need to do is get the Flex API download from here:

http://resources.arcgis.com/content/...x-api-download

When you unzip it you will have a arcgis_api_for_flex_2_4 folder drill down and find arcgis_api_for_flex_2_4\ArcGIS_Flex\skins\src\com\esri\ags\skins\PopUpRendererSkin.mxml and copy it to the clipboard.
In the Flex Viewer project right click on src folder in the Package Explorer and choose New > Package and for the name field put com.esri.ags.skins and then paste the PopUpRendererSkin.mxml into that Package/folder.

MattShetzer

Faizan,
Thank you for the assistance with this.

I am struggling to find the PopUpRenderer. The only one in my viewer is PopUpRendererSkin.abc and when I try to edit it, I receive:

Source could not be found for com.esri.ags.skins.PopUpRendererSkin in xyz.agslib-2.5-2011-11-30.swc

I'm I looking in the right place, or do I have to do something else first to make this change to the Popup Spacing?

Thank you for all your help.
Matt

rockzZ25;157420 wrote:
Try making changes as shown in code below. Remember to keep a backup of your original PopUpRenderer before making any changes. As it wouldn't let me add more then 10000 characters in this reply, i had to delete some code. I think the main change you need to make are in commitProperties and leave rest as it is.

FaizanTayyab

Try making changes as shown in code below. Remember to keep a backup of your original PopUpRenderer before making any changes. As it wouldn't let me add more then 10000 characters in this reply, i had to delete some code. I think the main change you need to make are in commitProperties and leave rest as it is.

           

      
            override protected function commitProperties():void
            {
                super.commitProperties();

                var featureLayer:FeatureLayer = hostComponent.featureLayer;
                var formattedAttributes:Object = hostComponent.formattedAttributes;
                var graphic:Graphic = hostComponent.graphic;
                var map:Map = hostComponent.map;
                var popUpInfo:PopUpInfo = hostComponent.popUpInfo;
                var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;
                var geometry:Geometry = graphic ? graphic.geometry : null;
                var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;

                vGroup.removeAllElements();
                if (popUpInfo)
                {
                    if (popUpInfo.title)
                    {
                        titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);
                        if (titleText.text)
                        {
                            vGroup.addElement(titleText);
                            vGroup.addElement(titleLine);
                        }
                    }

                    var htmlText:String;
                    if (popUpInfo.description)
                    {
                        htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);
                        if (htmlText)
                        {
                            var descriptionText:Text = new PopUpText();
                            descriptionText.percentWidth = 100;
                            descriptionText.styleSheet = textStyleSheet;
                            cleanAndSetHtmlText(descriptionText, htmlText);
       
                            vGroup.addElement(descriptionText);
                        }
                    }
                    else
                    {
                        var descriptionForm:Form;
      var item:Text=new PopUpText();
                        for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)
                        {
                            if (fieldInfo.visible)
                            {
                                var formItem:FormItem = new FormItem();
        
                                formItem.label = fieldInfo.label || fieldInfo.fieldName;
                               
        var label:Label;
                                htmlText = formattedAttributes[fieldInfo.fieldName];
                                if (htmlText)
                                {
                                    // convert attribute field values that just contain URLs into links 
                                    var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);
                                    if (match && match.length > 0)
                                    {
                                        label = new Label();
                                        htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
                                    }
                                    else
                                    {
                                        label = new PopUpText();
                                    }
                                    cleanAndSetHtmlText(label, htmlText);
                                    label.selectable = true;
                                    label.styleSheet = this.textStyleSheet;
                                    label.width = 150;
         if(label.htmlText.length>1){
          item.text=item.text+fieldInfo.label+" "+ label.htmlText.toString()+"\n";
         }
         //formItem.styleName = "formItemStyle";
                                    //formItem.addChild(label);
                                }
                                if (!descriptionForm)
                                {
                                    descriptionForm = new Form();
                                    descriptionForm.percentWidth = 100;
                                    descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;
                                    descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;
                                    descriptionForm.styleName = "formStyle";
                                }
        
                                //descriptionForm.addChild(formItem);
        
                            }
                        }
      vGroup.addElement(item);
                        if (descriptionForm)
                        {
                            vGroup.addElement(descriptionForm);
                        }
                    }

                    if (validMediaInfos && validMediaInfos.length > 0)
                    {
                        vGroup.addElement(mediaBrowser);
                        mediaBrowser.attributes = graphic.attributes;
                        mediaBrowser.formattedAttributes = formattedAttributes;
                        mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;
                        mediaBrowser.popUpMediaInfos = validMediaInfos;
                    }

                    if (popUpInfo.showAttachments && graphic && featureLayer
                        && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)
                    {
                        vGroup.addElement(attachmentInspector);
                        attachmentInspector.showAttachments(graphic, featureLayer);
                    }

                    if (map && geometry)
                    {
                        //vGroup.addElement(zoomToButton);
                    }
                }
            }

            private function cleanAndSetHtmlText(labelCntrl:Label, htmlText:String):void
            {
                if (labelCntrl && htmlText != null)
                {
                    htmlText = htmlText.replace(/<div/gi, "<br /><div"); // divs are ignored so put br's in front of them
                    htmlText = htmlText.replace(/<div><br ?\/><\/div>/gi, ""); // remove existing <div><br /></div>'s so we don't have too many new lines
                    // add target="_blank" to all anchor tags
                    htmlText = htmlText.replace(/<a.*?href\s*=\s*["']([^"']*).*?>(.*?)<\/a\s*>/gi, '<a href="$1" target="_blank">$2</a>');
                    labelCntrl.htmlText = htmlText;
                }
            }

            private function zoomToButton_clickHandler(event:MouseEvent):void
            {
                var graphic:Graphic = hostComponent.graphic;
                var map:Map = hostComponent.map;
                var geometry:Geometry = graphic.geometry;

                var extent:Extent = geometry.extent; // returns null for MapPoint or Multipoint's with only one point
                if (extent)
                {
                    map.extent = extent;
                    // make sure the whole extent is visible
                    if (!map.extent.contains(extent))
                    {
                        map.level--;
                    }
                }
                else
                {
           
                   // code here
                   
                }
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!--- @private -->
        <mx:Text id="titleText"
                 width="100%"
     fontSize="18"
                 fontWeight="bold"/>

        <!--- @private -->
        <s:Line id="titleLine" width="100%">
            <s:stroke>
                <s:SolidColorStroke id="titleLineSymbol"
                                    color="black"
                                    weight="1"/>
            </s:stroke>
        </s:Line>

        <!--- @private -->
        <supportClasses:PopUpMediaBrowser id="mediaBrowser"
                                          width="100%"
                                          skinClass="com.esri.ags.skins.supportClasses.PopUpMediaBrowserSkin"/>

        <!--- @private -->
        <esri:AttachmentInspector id="attachmentInspector"
                                  width="100%"
                                  addEnabled="false"
                                  deleteEnabled="false"/>

        <!--- @private -->
        <!-- <mx:LinkButton id="zoomToButton"
                       click="zoomToButton_clickHandler(event)"
                       fontWeight="bold"
                       label="{resourceManager.getString('ESRIMessages', 'zoomLabel')}"/>-->
    </fx:Declarations>

    <s:Scroller width="100%" height="100%">
        <!--- @private -->
        <s:VGroup id="vGroup" fontFamily="arial" fontSize="10" fontStyle="normal" fontWeight="normal"
      paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" gap="0" verticalAlign="top">
            <!-- elements are added in commitProperties() -->
        </s:VGroup>
    </s:Scroller>

</s:SparkSkin>

MattShetzer

I was hoping I might be able to get a little help with this. I've gone to the popUpRenderSkin, but don't see any where to edit the spacing. I really want to get rid of the double spacing, and move it to single so I can display more information in my popups.

Thanks in advance !
Matt Shetzer

I had the same problem but corrected it by modifying the popUpRendererSkin. If you look at the skin you will see it uses forms and formItem, which i think have some kind of default spacing.

FaizanTayyab

I had the same problem but corrected it by modifying the popUpRendererSkin. If you look at the skin you will see it uses forms and formItem, which i think have some kind of default spacing.

StephanieSnider

I'd like to know the answer to this as well.

MattShetzer

Did you ever find a resolution on this? I'd be interested too.
Thank you !
Matt Shetzer

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.