Maps and Apps HTML Header Question

3263
3
04-15-2014 09:29 AM
Labels (1)
BrianMcLeer1
New Contributor
Hello,
I am using the Maps and Apps Gallery. For some time, I have been having to refresh my page to get the header to display properly. I will attach two screen shots to show the difference. I have looked at Firebug, but was unable to find the issue.
[ATTACH=CONFIG]33120[/ATTACH]

Refresh

[ATTACH=CONFIG]33121[/ATTACH]

The site can be viewed at http://maps.cityofclovis.org

Thanks!
0 Kudos
3 Replies
ArcGISTeamLocalGov
New Contributor III
I've seen this once in a while and you've clearly seen it, but I've found it impossible to duplicate. 

You have a good workaround for it at this point, but if you want to go back to a bigger title, there may be a way.  Since the app is failing to shift the separator bar and the title after the image comes in, one idea that I have until I can duplicate the problem is to force the separator bar and the title to where they would go once the app knows the width of the image. For a 210-pixel image such as you are using, if you add 4 pixels to it to allow for the right-side margin for the logo image, you get a left-side offset for the title separator of 214 pixels. The title has a left-side margin of 8 pixels, so it can use this same offset.

In file configuration/styles.css, add the following lines to the bottom:
.titleSeparator {left:214px}
#mainTitle {left:214px}
0 Kudos
by Anonymous User
Not applicable
Original User: mktschudi

I've seen this once in a while and you've clearly seen it, but I've found it impossible to duplicate. 

You have a good workaround for it at this point, but if you want to go back to a bigger title, there may be a way.  Since the app is failing to shift the separator bar and the title after the image comes in, one idea that I have until I can duplicate the problem is to force the separator bar and the title to where they would go once the app knows the width of the image. For a 210-pixel image such as you are using, if you add 4 pixels to it to allow for the right-side margin for the logo image, you get a left-side offset for the title separator of 214 pixels. The title has a left-side margin of 8 pixels, so it can use this same offset.

In file configuration/styles.css, add the following lines to the bottom:
.titleSeparator {left:214px}
#mainTitle {left:214px}
0 Kudos
BrianMcLeer1
New Contributor
Thank you Mike! I plugged in the code and it seems to be working fine. I'll try it on a few different browsers to see how it works on them.
0 Kudos