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

Editing Banner in Sample Flex Viewer

SandeepTalasila

I want to edit the banner of the sample flex viewer, I would like to show the sub title in two lines, instead of one line. Because the width of the banner is increasing if my subtitle is too long. I have tried line breaks used in XML but it didn't work. I also tried adding two subtitles, but still I cannot get to the result. Please let me know any ideas.

Thanks,
Sandeep.

Vind meer berichten getagd met

Accepted answers

All comments

JustinFultz

Perfect! Thanks!

KeithBornhorst

Your default.css additions...

.BannerSubtitle
{
 color:#ff0000;
}

... are being overriden by code in UIManager that sets the subtitle color to the title color.

// UIManager.as ~line 203
var cssStyleDeclarationBannerSubtitle:CSSStyleDeclaration = new CSSStyleDeclaration(".BannerSubtitle");
if (numberOfStyleColors > 4)
{
     cssStyleDeclarationBannerSubtitle.setStyle("color", titleColor);
}
topLevelStyleManager.setStyleDeclaration(".BannerSubtitle", cssStyleDeclarationBannerSubtitle, false);

Comment that out and your subtitle should take whatever stylings are assigned to it in default.css.

Cheers,
K

JustinFultz

I have been unsuccessful at changing the subtitle color in the default.css file.

I have tried the following:

color: #FF0000;
color: 0#FF0000;
color: red;
fontColor: #FF0000;
fontColor: 0#FF0000;
fontColor: red;

Anyone have any other suggestions?

TristanKnowlton

Thanks Robert for the tip change the banner width to 100% of page.

Greatly appreciated!!

IanParfitt

Thanks Robert, that is just what I needed - changed your param variable to mine and it worked first try! Sending you a virtual cerveza, have a great weekend.

Ian

RobertScheitlin__GISP

Ian,

You can actually do it all in the MapManager.mxml in the mapLoadComplete function.

I have setup the url parameter as "sTitle" so it would look like (http://gislap134/flexviewer/index.html?sTitle=hi%20world).

private function mapLoadComplete(event:MapEvent):void
      {
       SiteContainer.dispatchEvent(new AppEvent(AppEvent.LAYER_LOADED, false, false, null));
       
                try
                {
                    if (ExternalInterface.available)
                    {
                     var result:URLVariables = new URLVariables();
                        // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
                        var search:String = ExternalInterface.call("location.search.substring", 1);
                        if (search && search.length > 0 && search != "debug=true")
                        {
                         result.decode(search);
                         var xUrlParam:String;
                         if (result["sTitle"]){
        xUrlParam = result.sTitle; 
                             SiteContainer.getInstance().controller.banner.subtitle = xUrlParam;
                          } 
                        }
                    }
                }
                catch (error:Error){}
            }

IanParfitt

Hi
I'm trying to use parameters from the URL to populate the subtitle string. I have a getURLParameters function which I use in MapManager.mxml (see below) but don't know how to call this in Banner.mxml to redefine the subtitle string. I guess I need to add this function to Banner.mxml and write another function that calls it? Any help would be much appreciated

Thanks

Ian

            private function getURLParameters():Object
            {
                var result:URLVariables = new URLVariables();

                try
                {
                    if (ExternalInterface.available)
                    {
                        // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
                        var search:String = ExternalInterface.call("location.search.substring", 1);
                        if (search && search.length > 0)
                        {
                            result.decode(search);
                        }
                    }
                }
                catch (error:Error)
                {
                    Alert.show(error.toString());
                }

                return result;
            }

RobertScheitlin__GISP

Darryl,

You have to set the width of both the banner.mxml and the controller.mxml

1. in the index.mxml change the existing line to this one

<controller><Controller id="control" left="20" top="20" right="30" width="100%"/></controller>

2. in the Banner.mxml add

width  ="100%"

to the top canvas.

TristanKnowlton

Can someone help me figure out how to extend the banner across the screen so that it is 100% the width of the page?

Thanks!

SandeepTalasila

Thanks Robert, it worked. I am sorry that i ignored what you said in the first response.

RobertScheitlin__GISP

Sandeep,

OK, so the issue is in your subtitle

Make sure your config.xml does not have

<subtitle>Public School Projects in USA<br/>Click on the tools below to access</subtitle>

it should have

<subtitle>Public School Projects in USA&lt;br/&gt;Click on the tools below to access</subtitle>

SandeepTalasila

Here is banner.mxml code

<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright © 2008 - 2009 ESRI
//
// All rights reserved under the copyright laws of the United States.
// You may freely redistribute and use this software, with or
// without modification, provided you include the original copyright
// and use restrictions.  See use restrictions in the file:
// <install location>/FlexViewer/License.txt
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Canvas xmlns:mx ="http://www.adobe.com/2006/mxml" 
   styleName ="BannerCanvas" 
   minWidth ="500" 
   minHeight ="70">

 <mx:Script>
  <![CDATA[
  
            import mx.resources.ResourceBundle;
               
   private var _logo:String;
   
   /**
    * The logo that is used to brand the application at the controller area.
    * 
    * @param value the relative URL points to the logo image file.
    */
   public function set logo(value:String):void
   {
    _logo = value;
    if (value != "")
    {
     imgLogo.visible = true;
     imgLogo.includeInLayout = true;
    }
    else
    {
     imgLogo.visible = false;
     imgLogo.includeInLayout = false;
    }
   }
     
   /**
    * @private
    */
   [Bindable]
   public function get logo():String
   {
    return _logo;
   }
   
   /**
    * The title displayed in the banner.
    */
   [Bindable]
   public var title:String;
   
   /**
    * The subtitle displayed in the banner.
    */ 
   [Bindable]
   public var subtitle:String;
   
   /**
    * The current/activated tool status displayed in the banner.
    */  
    [Bindable]
   [Bindable]
   public var status:String;    
   
   private function nlsString(nlsToken:String):String
   {
    return resourceManager.getString('ControllerStrings', nlsToken);
   }
   
  ]]>
 </mx:Script>
 
 
    <mx:Metadata>
        [ResourceBundle("ControllerStrings")]
    </mx:Metadata> 
    

 <mx:VBox width="100%" height="100%" verticalGap="0">
  <mx:Spacer height="5"/>
  <mx:HBox width="100%" horizontalGap="0" verticalAlign="middle">
   <mx:Spacer width="10" />
   <mx:Image id="imgLogo" 
      source="{logo}" 
      maintainAspectRatio="true" 
      maxHeight="50" 
      maxWidth="70" 
      horizontalAlign="left" 
      verticalAlign="top" 
      visible="false" 
      includeInLayout="false"/>
   <mx:Spacer width="5" />
   <mx:VBox verticalGap="0" horizontalAlign="left" width="100%">
    <mx:Label styleName="BannerTitle" text="{title}"/>
    <mx:HRule styleName="BannerRule" width="100%" />
    <mx:HBox width="100%" verticalAlign="top">
     <mx:Text styleName="BannerSubtitle" htmlText="{subtitle}"/>
     <mx:HBox width="100%" horizontalAlign="right">
      <mx:Label styleName="BannerStatus" text="{nlsString('current_action') + status}"/>
     </mx:HBox>
    </mx:HBox>
   </mx:VBox>
   <mx:Spacer width="10" />
  </mx:HBox>
  <mx:Spacer height="15"/>
 </mx:VBox>
 
</mx:Canvas>

Thanks,

RobertScheitlin__GISP

Sandeep,

Strange all of that is fine... Must be somewhere in your banner.mxml.

Try pasting your banner.mxml code. Be sure to use the # button in the toolbar to wrap your code in the proper code block.

SandeepTalasila

Robert,
Thanks for the reply, here is my code

<subtitle>Public School Projects in USA<br/>Click on the tools below to access</subtitle>

CSS Code: I have included 'line-height' in the code but still the result is same

.BannerSubtitle
{
fontFamily: Arial;
fontSize: 12;
fontWeight: bold;
color: #FFFFFF;
line-height: 0;
}

Thanks,

RobertScheitlin__GISP

Sandeep,

Please attach your <subtitle> from your config.xml. Also look at your BannerSubtitle css style in your style shhet.

SandeepTalasila

Thanks Robert, It worked. But it is creating an unusual spacing between both lines (see image) and i was not able to figure where to adjust the line spacing.

img.JPG

RobertScheitlin__GISP

Sandeep,

All you have to do is change this line in the Banner.mxml

<mx:Label styleName="BannerSubtitle" text="{subtitle}"/>

to this one

<mx:Text styleName="BannerSubtitle" htmlText="{subtitle}"/>

and in the config.xml use a line like this for the subtitle

<subtitle>Powered by ArcGIS Server Powered by ArcGIS Server Powered by ArcGIS Server&lt;br/&gt;Powered by ArcGIS Server Powered by ArcGIS Server</subtitle>

The important part is

&lt;br/&gt;

for the line return

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.