With new ArcGIS online update, html editor strips code. How can I add buttons with html?

[BrendanCleary]

Before the March ArcGIS online update, you were able to select to edit your story map in html, and it would stay on the html editor the entire time. Now, every time you save an edit on a slide, it switches back to the normal editor.

here is an example of the code that gets stripped

 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

I previously had HTML Bootstrap buttons on my slides, but now every time I save the HTML code, it strips to code and shows up as text. Does anyone have any ideas?

I tried to insert a jpeg into the story map with a link attached to it, but that puts a grey box on the image.

Does anyone know how to keep working in HTML or remove the grey box?

Thanks!

[GregoryL_Azou]

Hi Brendan,

Sorry this change is affecting you, we had to make it for security reason. We are moving towards a model where the application will only authorize a limited set of html tags and attributes. Your example did not went true correctly, if you can use the advanced editor and select insert code > HTML I will try and let you know if I can support that.

We have a tutorial about using buttons, that markup which is using Bootstrap is still supported https://developerscorner.storymaps.arcgis.com/create-buttons-for-main-stage-actions-using-the-style-...

I will keep track of defaulting to the source view mode if that was the last view you were on before saving the section.

For inserting image, are you using the text editor feature or custom HTML?

When using the text editor feature, an edit button on the side of the image should let you chose if you want the maximize button or not (I know sometimes the edit button don't appear and you will have no other choice than recreating the image)

[BrendanCleary]

Thank you for your quick response, I am still having the same problem. When

I am editing in the source page and I click save, it switches back to the

normal editor and does not save things properly. I tried to use the codes

from the page you sent me, but they were not working.

[GregoryL_Azou]

See the following Journal that is using the markup below https://www.arcgis.com/apps/MapJournal/index.html?appid=a4bf5f619eea481590887af84bef0bfd

By replacing the button tag with a "a" tag I am able to get a working dropdown

<p>test <a class="btn-orange" href="http://www.arcgis.com" target="_blank">Show 100-year floodplain</a></p>
<style type="text/css">.btn-orange {
     display: inline-block;
     background-color: #f0ad4e;
     border-color: #f0ad4e !important;
     color: #fff !important;
     padding: 3px 8px;
     border-radius: 5px;
}
</style>
<div class="dropdown">
<p> </p>


<p><a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" target="_blank" type="button">Dropdown Example </a></p>


<ul class="dropdown-menu">
  <li><a href="#" target="_blank">HTML</a></li>
  <li><a href="#" target="_blank">CSS</a></li>
  <li><a href="#" target="_blank">JavaScript</a></li>
</ul>
</div>

With our next release around mid June I will make sure you can use your original markup and consider the change to conserve the active view of the editor

[MarthaSelig1]

Gregory,

I have a similar problem. My Journal (http://lacounty.maps.arcgis.com/apps/MapJournal/index.html?appid=3bca47ad1e734dc49857ebffbf4574c5 ) has a drop-down box on every section, along with a home page link that uses the Journal's home page icon. This morning I modified the main stage link for our Historic Preservation Ordinance (section 9) and I can no longer get the custom code to work for this section because the save occurs after switching to normal view and destroying it.

Here is a sample that works for all the other sections. Is there any way I can get this to work on my updated page?

<p align="center"> </p>
<p><select name="menu" onchange="window.open(this.options[this.selectedIndex].value)"><option disabled="disabled" selected="selected">Click for Additional Information</option><option value="http://planning.lacounty.gov/ela">East LA 3rd Street Specific Plan</option> </select></p>
<p> </p>
<div class="dot glyphicon glyphicon-home" data-index="0" data-original-title="" title=""> </div>
<p><a onclick="require(['dojo/topic'], function(topic){ topic.publish('story-navigate-section', 0); });" target="_blank"> </a></p>
<p> </p>

 

Thanks,

Martha

[GregoryL_Azou]

Hey Martha, I am not sure if it's last released that affected you or the release before but indeed it looks like the editor doesn't like to add a div or empty span inside a paragraph. But the following is working for me (no change for the select tag). See it live at https://www.arcgis.com/apps/MapJournal/index.html?appid=a5cf5e14b00743eeafee531999972781

<p>test</p>


<p><select name="menu" onchange="window.open(this.options[this.selectedIndex].value)"><option disabled="disabled" selected="selected">Click for Additional Information</option><option value="http://planning.lacounty.gov/ela">East LA 3rd Street Specific Plan</option> </select></p>


<p><a onclick="require(['dojo/topic'], function(topic){ topic.publish('story-navigate-section', 0); });" target="_blank"><span class="dot glyphicon glyphicon-home"> </span></a></p>


<p>test</p>

[MarthaSelig1]

I've got problems, Gregory,

I copied your code into my section and center-aligned the two items in their paragraph blocks. They both work, but the dropdown does not show the disabled state as your sample does.

I was able to save the Journal after waiting for several minutes. Still don't understand why the dropdown doesn't start in the disabled state.

Thanks,

Martha

[GregoryL_Azou]

Weird. Could you try one step at a time like don't center align and see if it helps. Or maybe try in a new Journal. Can you paste here the full HTML of that section?

[MarthaSelig1]

<figure class="caption">
<div class="image-container activate-fullscreen"><img alt="" src="http://planning.lacounty.gov/assets/img/gis/story_maps/Historic_Preservation_banner.jpg" /></div>

<figcaption>Source: Department of Regional Planning</figcaption>
</figure>

<p>Historic preservation safeguards the community&rsquo;s historic and cultural heritage, supports the local economy, and fosters civic pride in the county&rsquo;s beauty and history. Numerous studies have shown that preserving historic landmarks is a key ingredient in building stronger communities, creating jobs, and supporting environmental sustainability. Indeed, historic preservation is an important investment in the present and the future.</p>

<p> </p>

<p align="center"><select name="menu" onchange="window.open(this.options[this.selectedIndex].value)"><option disabled="disabled" selected="selected">Click for Additional Information</option><option value="http://planning.lacounty.gov/ela">East LA 3rd Street Specific Plan</option> </select></p>

<p> </p>

<p align="center"><a onclick="require(['dojo/topic'], function(topic){ topic.publish('story-navigate-section', 0); });" target="_blank"><span class="dot glyphicon glyphicon-home"> </span></a></p>

Have a good weekend. Our office is closed on Friday, so I will check back Monday.

Thanks again,

Martha

[GregoryL_Azou]

Your issue is due to the theme you have selected, with the default theme there is no issue but with the black one and maybe others it seems that you have to force the font color to make sure the dropdown default is visible. I will look into fixing that issue, from now you can add the following markup in one of your section to fix it

<style>
select[name="menu"] {
  color: black;
}
</style>