story map compare. Change size description panel

[Pía_ZenaidaVirginia]

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

[StephenSylvia]

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.

[Pía_ZenaidaVirginia]

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

[StephenSylvia · Accepted solution]

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

[Pía_ZenaidaVirginia]

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

[Pía_ZenaidaVirginia]

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

Virginia

[StephenSylvia]

Great, I'm glad everything worked out.