Want to include legend image in Shortlist header/banner.

1338
9
Jump to solution
08-16-2017 05:46 PM
kmsmikrud
Occasional Contributor III

Hi,

I created a legend image and have added this with guidance to the index.html as a table after the Div 'Header' and above the div 'nav-bar'. This was then formatted with .css and everything seemed to be great until I realized that the text in the location text boxes was being truncated and you could no longer view all the text for certain locations. Prior to adding the legend I could view all the text included. I am hoping to get some advice on how I might best add that legend image into the header and still be able to view all the location text.

Is there a better place to be adding the image then between the two div elements mentioned above? Or is there a way to alter the application height if it is fixed?

I've attached two screenshots with one showing the legend as an image placed between the Div 'Header' and the Div 'nav-bar'. The second screenshot shows one of the location text boxes where the text is not visible.

I would really appreciate the help. I would love to have a toggable legend but in not having the programming skills being able to add a legend image to the header was going to be the work around.

Thanks in advance,

Kathy

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
kmsmikrud
Occasional Contributor III

Hi Mark,

I added in the class 'mainViewAboveMap' and it WORKS!!! I'm thrilled, thanks so much!

Kathy

View solution in original post

9 Replies
RupertEssinger
Frequent Contributor

Hi Kathy

Can you share the URL of your customized Shortlist, and also the URL of the hosted Shortlist that your code is pointing at? I found this hosted Shortlist online but wanted to check it is the correct one: https://adfg.maps.arcgis.com/apps/Shortlist/index.html?appid=dcc83ede81614585ba4ff3e719c4f38e 

Rupert

0 Kudos
kmsmikrud
Occasional Contributor III

Hi Rupert,

Thanks for your reply. That is the correct hosted Shortlist URL online. I can't share the URL of the customized Shortlist only because its behind the firewall here at work on the development server but I could attached the index.html that we have modified, would that work?

Thanks kindly,

Kathy

0 Kudos
RupertEssinger
Frequent Contributor

Thanks. I don't think you need to attach the index.html file. The issue with the text in the info panel (the panel containing the photo and text description)  being clipped so you can't read all of it is one that we fixed in the late June update to ArcGIS Online, so that fix is in the Shortlist source code v 2.3.2 released on July 6th.  If you downloaded the source before after then, then you'll have that fix. If you downloaded the source code before then, you don't have that fix, in which case, your change to the header isn't the cause of that clipping, and downloading the latest source code should fix the issue.


Rupert

0 Kudos
kmsmikrud
Occasional Contributor III

Hi Rupert,

Thanks for the good information. I just downloaded the Shortlist source code v 2.3.3 and updated that index.html file with the code we had added to the other file. At first glance it appears to work but then we noticed it still doesn't show all the text in the boxes depending on the screen width. I've attached two screenshots. The first shows the "More Info" text at the bottom of the location text box and this is using a wider monitor. The second screenshot shows at a smaller width this contact info no longer shows. Prior to this I believe it was missing no matter what the width so this is better but looks like unfortunately still an issue. Perhaps its where the legend image is inserted in the index.html file?  I appreciate your help so much!

This screenshot shows the "For More Info" last text in the box on a wider screenContact Info at bottom of Location text box not showing

0 Kudos
kmsmikrud
Occasional Contributor III

One additional thing I noticed, is the legend image is placed as a table after the div "header" and before the div "nav-bar" and with css it is formatted at the wider screen to have a margin on the top to give a little space between the legend image and the ADF&G logo. Then when the screen is sized to a smaller width the legend images responds by not having the top margin and moves above the 'nav-bar'. When this happens is when I notice the last text in the location text box disappearing. Which is really too bad because the legend looks great in being able to move into that space above else  the legend image would move over the nav-bar or not be visible for certain sized screens.

0 Kudos
MarkCooney
Occasional Contributor III

Hi Kathy,

For the text issue, try adding a class of 'mainViewAboveMap' to the DOM element you are using for your legend in the index.html.

Mark

0 Kudos
kmsmikrud
Occasional Contributor III

Hi Mark,

I added in the class 'mainViewAboveMap' and it WORKS!!! I'm thrilled, thanks so much!

Kathy

RupertEssinger
Frequent Contributor

I found this post by Patrick McKinney  about adding legends to Shortlist as well:  Legend Plugin for Shortlist Story Map 

And I also found another example of a Shortlist (original version 1, not hosted version 2) with a legend: DNR - Trout Trails 

Rupert

0 Kudos
kmsmikrud
Occasional Contributor III

Thanks for the link. I found that post in a search as well and was hoping that customization would soon be ready for the version 2 because I think a toggable legend is much preferred to the image in the header. thanks for the other DNR-Trout Trails link as well.

0 Kudos