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

Banner width

CindyKamigaki

I'd like to widen the banner in Flex Viewer and cannot find reference to banners in the codes provided in the flexviewer folder. I've found reference to banner.mxml within the ArcGIS forums, but that seems to apply to API for Flex. Any clarity would be greatly appreciated.

Find more posts tagged with

Accepted answers

All comments

rscheitlin

Samuel,

The navigation widget has a top property as well:

<widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf"/>

SamuelLingeman

Samuel,

Whatever height you ended up changing you banner to is the number you need to set the top attribute of your map to in the main config.xml.
<map wraparound180="true" initialextent="-9598200 3968200 -9500400 4026200"  top="40" >

I'm sure you get told this all the time, but I'm not sure what most of us inexperienced people would do without your help and patience. Any ideas on moving the navigation widget down a bit, it now spills over into the header. Perhaps I should stick with a stock header.

rscheitlin

Samuel,

Whatever height you ended up changing you banner to is the number you need to set the top attribute of your map to in the main config.xml.

<map wraparound180="true" initialextent="-9598200 3968200 -9500400 4026200"  top="40" >

SamuelLingeman

You'll want to take a look at the HeaderControllerWidget.mxml file in the /src/widgets/HeaderController/ directory. Specifically, the contents of "headerGroup"
<s:Group id="headerGroup"
        width="100%" height="85">
   
<mx:HBox id="headerContent"
...
That should get you started.

Cheers,
K

Hi Robert, I implemented this and my header it now taller (height increased), but predicatably, the map is now slightly under the header, any ideas on how to fix this?

charlessaenz

Hmmm...I think I'm comfortable with just Viewer hahaha, not really ready to move onto the API yet. Thank You though with all of your help.

rscheitlin

Charles,

If you want to start from scratch and are a semi experienced developer than yes use the API. The Flex Viewer is a great tool for the non-developer as it gives them a great point to begin with. If you are considering using the API than you you would need to use some compiler like Flash Builder 4 or Flash Develop, etc. If you are going to do that then why not use the Flex Viewer source code?

charlessaenz

If I move to the API would it still be restricted or am I able to have more free reign on customization?

rscheitlin

Charles,

That is correct if you are using the Flex Viewer source code than you can not adjust the header height.

charlessaenz

Andrew,

No the height is hard coded and not configurable.

So you're saying that you can't edit the default banner like you were able to in ArcGIS Server Manager? If that's so that is such a bummer, so we would have to just stick with editing the style of the application?

rscheitlin

Andrew,

No the height is hard coded and not configurable.

AndrewHargreaves

Hi,
is there any way to edit this just through the HeaderControl.xml? I want to replace the default banner with one of our own....however, i'm only working with the compiled flexviewer and can't edit the mxml....

thanks

CindyKamigaki

Robert,

I mistyped and should have stated height. Our logo is very detailed and I thought I could make the title banner height longer and enlarge our logo. Currently, it just looks like a blob. I'm new to code writing and should probably invest in a book. Can you suggest one?

rscheitlin

Cindy,

So as I mentioned earlier it is set to 100% in the Flex Viewer 2.2, so what are you after.

CindyKamigaki

Thanks for pointing me in the right direction.

KeithBornhorst

You'll want to take a look at the HeaderControllerWidget.mxml file in the /src/widgets/HeaderController/ directory. Specifically, the contents of "headerGroup"

<s:Group id="headerGroup"
        width="100%" height="85">
   <!-- basic structure is an hbox with
        logoIcon: a logo (if specified)
        titleGroup: the title on top of the subtitle
        widgetBox: icons for all widgets specified in main configuration file
        linkBox: "link buttons" for all links specified in main configuration file
    -->
<mx:HBox id="headerContent"
...

That should get you started.

Cheers,
K

CindyKamigaki

Sorry, Let me clarify. I'm inquirying about the color band where the title, subtitle, logo and widget tray are located.

rscheitlin

Cindy,

I am a little confused... If you are talking about the header/banner in the Flex Viewer than it automatically covers 100% of the web browsers window width. Are you talking about height or the old SFV...?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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