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.

[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

<br/>

for the line return

[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.

[RobertScheitlin__GISP]

Sandeep,

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

[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,

   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]

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,

   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]

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

[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!