topic Re: story map compare. Change size description panel in Classic Esri Story Maps Questions

story map compare. Change size description panel

Pía_ZenaidaVirginia — Mon, 31 Mar 2014 14:35:51 GMT

Hi, I want to know, if there is an easy way to change the size of the description panel at bottom of this app; I would like to have
more space, so the description will be easy to read.

This is my Compare example: http://www.arcgis.com/home/item.html?id=2d4a76973ea94966af5e9bc0dac45be3

Thanks for help and suggestion.

Virginia

Re: story map compare. Change size description panel

StephenSylvia — Tue, 01 Apr 2014 15:04:43 GMT

Unfortunately, this is not possible if you are using the app that is hosted on ArcGIS Online. If you are willing to download the source code (when sharing to the template choose download instead of publish) and host the code on your own server, you can modify the CSS and the JavaScript to change the description height.

Re: story map compare. Change size description panel

Pía_ZenaidaVirginia — Tue, 01 Apr 2014 17:38:34 GMT

Hi, yes I download the template, but I can´t found where to change the size. I don´t have much experience programming; I have to change layout.css and layout.js files, but I can´t figure out the exactly line code to modify; can you help me at this point?

Thanks

Re: story map compare. Change size description panel

StephenSylvia — Wed, 02 Apr 2014 14:56:35 GMT

In the layout.css file, there are three lines that you need to change to adjust the initial description height:

.map{
width:100%;
height:75%;
border-left:1px solid #444;
}

.desToggle{
position:absolute;
bottom:25%; - THIS SHOULD BE THE SAME PERCENTAGE AS THE .descriptionCon HEIGHT
padding:5px;
background-color:#fff;
color:#444;
font-family:Arial, Helvetica, sans-serif;
z-index:100;
cursor:pointer;
}

.descriptionCon{
width:100%;
height:25%;
border-left:1px solid #444;
overflow:auto;
}

Then in the layout.js file, you will need to adjust all the height properties that get set in both the legend and description toggle. It will depend what height you're changing the description to but you will need the .legendCon, the .map, and .descriptionCon's height to add up to 100%. The .desToggle bottom position should always match the height of the .descriptionCon

function legendToggle(){
sync = false;
if ($(".legendCon").is(':visible')){
$(".legendCon").hide();
$(".legToggle").html(configOptions.i18n.viewer.toggles.legend+' ?');
if ($(".descriptionCon").is(':visible')){
$(".map").css('height','75%');
}
else{
$(".map").css('height','100%');
}
resizeMaps();
}
else{
$(".legendCon").show();
$(".legToggle").html(configOptions.i18n.viewer.toggles.legend+' ?');
if ($(".descriptionCon").is(':visible')){
$(".map").css('height','40%');
}
else{
$(".map").css('height','65%');
}
resizeMaps();
}
}

function descriptionToggle(){
sync = false;
if ($(".descriptionCon").is(':visible')){
$(".descriptionCon").hide();
$(".desToggle").html(configOptions.i18n.viewer.toggles.description+' ?');
$(".desToggle").css('bottom','0%');
if ($(".legendCon").is(':visible')){
$(".map").css('height','65%');
}
else{
$(".map").css('height','100%');
}
resizeMaps();
}
else{
$(".descriptionCon").show();
$(".desToggle").html(configOptions.i18n.viewer.toggles.description+' ?');
$(".desToggle").css('bottom','25%');
if ($(".legendCon").is(':visible')){
$(".map").css('height','40%');
}
else{
$(".map").css('height','75%');
}
resizeMaps();
}
}

Re: story map compare. Change size description panel

Pía_ZenaidaVirginia — Fri, 04 Apr 2014 12:02:49 GMT

Hi, I want to thank you very much for your help to modify the description panel. Thank you for your time spend to whrite the instructions. I hope to make it without problem. I will tell you when I complete this changes.

Virginia

Re: story map compare. Change size description panel

Pía_ZenaidaVirginia — Mon, 07 Apr 2014 12:32:13 GMT

Hi, I can modify my example app successfully!!!!. Thank you very much.

Virginia

Re: story map compare. Change size description panel

StephenSylvia — Tue, 08 Apr 2014 10:57:44 GMT

Great, I'm glad everything worked out.