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; } } }

Change media container size in Pop Up Window

CarrieTropasso1

I would like to change the media container size in the popup window for Flex Viewer 2.4 so that there are no gaps around the top and bottom of my image - see attached image (I want to remove the gaps so that the blue border is tight against the image). Where do I access this information to change this setting?

Thanks

Gap.PNG

Monitor ERGIS 2026.png

Vind meer berichten getagd met

Accepted answers

All comments

RobertScheitlin__GISP

Carrie,

To do this you would have to extend/modify the Flex API's PopUpRendererSkin.mxml and then work with the PopUpMediaBrowser component and explicitly set a height, it has a 100% width right now so the height is always going to be a value that would equal the measured width. If you even what to attempt doing this I would really suggest getting rid of the border instead. Extending the API with a custom skin is not extremely hard but it's not a beginner task either.

CarrieTropasso1

Hi Robert,
Thanks so much for the reply. I have customized some of the other skins and I assumed where you specified is where I would make this change, but I am not having any luck changing this. You mentioned removing the border....where would I go and how I would I go about doing this - at this point this may be my best option.

Thanks,
Carrie

RobertScheitlin__GISP

Carrie,

In the PopUpMediaBrowserSkin.mxml you need to remove or comment out the border:

        <s:Group id="imageOrChartGroup"
                 width="100%"
                 resize="imageOrChartGroup_resizeHandler(event)">
            <s:Rect id="borderRect"
                    left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke id="borderRectSymbol"
                                        color="black"
                                        weight="1"/>
                </s:stroke>
            </s:Rect>

            <mx:SWFLoader id="image"
                          left="1" right="1" top="1" bottom="1"
                          click="image_clickHandler(event)"
                          initialize="image_initializeHandler(event)"
                          verticalAlign="middle"/>

            <mx:BarChart id="barChart"
                         left="1" right="1" top="1" bottom="1"
                         showDataTips="true">
                <mx:series>
                    <mx:BarSeries id="barSeries" xField="value"/>
                </mx:series>
                <mx:verticalAxis>
                    <mx:CategoryAxis id="barAxis" categoryField="name"/>
                </mx:verticalAxis>
                <mx:verticalAxisRenderers>
                    <mx:AxisRenderer axis="{barAxis}" showLabels="false"/>
                </mx:verticalAxisRenderers>
            </mx:BarChart>

            <mx:ColumnChart id="columnChart"
                            left="1" right="1" top="1" bottom="1"
                            showDataTips="true">
                <mx:series>
                    <mx:ColumnSeries id="columnSeries" yField="value"/>
                </mx:series>
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="columnAxis" categoryField="name"/>
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{columnAxis}" showLabels="false"/>
                </mx:horizontalAxisRenderers>
            </mx:ColumnChart>

            <mx:LineChart id="lineChart"
                          left="1" right="1" top="1" bottom="1"
                          showDataTips="true">
                <mx:series>
                    <mx:LineSeries id="lineSeries" yField="value"/>
                </mx:series>
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="lineAxis" categoryField="name"/>
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{lineAxis}" showLabels="false"/>
                </mx:horizontalAxisRenderers>
            </mx:LineChart>

            <mx:PieChart id="pieChart"
                         left="1" right="1" top="1" bottom="1"
                         showDataTips="true">
                <mx:series>
                    <mx:PieSeries id="pieSeries"
                                  field="value"
                                  labelField="name"
                                  nameField="name"/>
                </mx:series>
            </mx:PieChart>
        </s:Group>

DeweyPosehn

Hi Robert, I am trying to do the same thing and I am working with the full source-code version of the 2.4 flex viewer but I do not have the skin 'PopUpMediaBrowserSkin.mxml'. On another forum you supplied a zip file of "PopUpRendererSkin.mxml' which I downloaded because my project was missing that skin too. I am not sure why these are not included in the full version download of 2.4 but I was wondering if you could post a copy of 'PopUpMediaBrowserSkin.mxml'? If you could, I would greatly appreciate it!

DeweyPosehn

Oops, I just found out that I could download the source code from the api itself so I now have the skin file for the media browser that I can work with.

AvelCasidsid

In the PopUpMediaBrowserSkin.mxml, you will see that the width is 100%. Notice the resize event, resize="imageOrChartGroup_resizeHandler(event)". Looking at the definition of this event, you will see this:

private function imageOrChartGroup_resizeHandler(event:ResizeEvent):void
{
imageOrChartGroup.height = imageOrChartGroup.width; // make it square
}

this makes the height equal to the width.

adnanhussain

Hi,

i want to change the size of container ( piechart or barchart) ...in popup window...these are two big...your help is required .thanks
dani

WillHughes1

What is the correct way to modify the PopUpMediaBrowserSkin.mxml file?

I have already modified the PopUpRendererSkin.mxml file using Robert's instructions in another post.
Created package called com.esri.ags.skin , and then copied the PopUpRendererSkin.mxml file from the 3.0 API (arcgis_api_for_flex_3_0\ArcGIS_Flex\skins\src\com\esri\ags\skins), and pasted into the new package (ags.skins).

Is the process the same for adding and modifying the PopUpMediaBrowserSkin.mxml?
The only difference I see is that PopUpMediaBrowserSkin.mxml is located in the supportClasses folder inside the API download.
Can I place the PopUpMediaBrowserSkin.mxml file in the same package where I put PopUpRendererSkin.mxml?

Thanks.

Will

RobertScheitlin__GISP

Will,

Yes you can put it in the same folder but it is better to mirror the API's package structure so that you do not have to change any of the codes paths. So my recommendation is to add the supportClasses folder (make sure to use the same case).

WillHughes1

Robert,

One more questions regarding label rotation.
I added labelRotation="45" to the <mx:horizontalAxisRenderers> tagand then compiled, however the labels are not rotated. What am I missing? Thanks. Will

<mx:ColumnChart id="columnChart"left="1" right="1" top="1" bottom="1"dataTipFunction="columnSeriesDataTipFunction"showDataTips="true"><mx:series><mx:ColumnSeries id="columnSeries" yField="value"/></mx:series><mx:horizontalAxis><mx:CategoryAxis id="columnAxis" categoryField="name"/></mx:horizontalAxis><mx:horizontalAxisRenderers><mx:AxisRenderer axis="{columnAxis}" showLabels="true" labelRotation="45"/></mx:horizontalAxisRenderers></mx:ColumnChart>

RobertScheitlin__GISP

Will,

I dealt with this MANY versions ago of the API and Flex SDK and the only way I could be label rotated back then was to embed the font in the main index.mxml. That was back when you had to embed fonts in a Flex App if you wanted them rotated though.

AtanasRusev

,

trying to resolve the same question I just do the simplest and it worked:

in PopUpRendererSkin.mxml change this: (I wanted bigger popup...)
......
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"
width="350"
maxHeight="400"
preinitialize="skin_preinitializeHandler(event)">
......

and then, because I dont want the square box and empty spaces:

in PopUpMediaBrowserSkin.mxml :
....
private function imageOrChartGroup_resizeHandler(event:ResizeEvent):void
{
imageOrChartGroup.height = imageOrChartGroup.width -100 ; // Hacko make it not square
}
.....

so depends on what you want as size - but for me it was the easiest custom way

Best Regards!

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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