topic Re: With new ArcGIS online update, html editor strips code. How can I add buttons with html? in Classic Esri Story Maps Questions

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

BrendanCleary — Sat, 11 Dec 2021 09:02:52 GMT

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!

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

GregoryL_Azou — Thu, 03 Mar 2016 19:06:47 GMT

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-tag-144b3aeb5583#.gq…

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)

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

BrendanCleary — Thu, 03 Mar 2016 19:28:56 GMT

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.

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

GregoryL_Azou — Sat, 11 Dec 2021 09:02:55 GMT

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

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

MarthaSelig1 — Sat, 11 Dec 2021 09:02:58 GMT

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

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

GregoryL_Azou — Sat, 11 Dec 2021 09:03:01 GMT

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>

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

MarthaSelig1 — Fri, 04 Mar 2016 01:02:49 GMT

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

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

GregoryL_Azou — Fri, 04 Mar 2016 01:11:30 GMT

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?

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

MarthaSelig1 — Sat, 11 Dec 2021 09:03:04 GMT

<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

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

GregoryL_Azou — Sat, 11 Dec 2021 09:03:06 GMT

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>

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

MarthaSelig1 — Mon, 07 Mar 2016 17:49:18 GMT

Gregory,

I am just about back in business. The code above works for me and the dropdown on the updated page looks and behaves like the rest. Thank you very much for all your help.

My problem is that I inserted the style on the home page, thinking that would be the appropriate spot for a style needed throughout and I've now had my home page code "corrected". I am not an experienced HTML programmer, so I'd really appreciate it if you could route me to a site that shows just what is acceptable in the Journal. If I had a good reference page, I'm sure I'd make faster progress.

My homepage used to have a div with a font-size setting in it after the first paragraph, because I don't need everything in the default large font. This setting was removed during the save and every paragraph given a span style with a font size in it. Though that seems like overkill, it works, but I haven't found a way to reduce the line height. Adding it to each span doesn't work, adding it to the div tag doesn't work and setting up a style inside the div doesn't work. Is there a way to override the section's default?

Thanks,

Martha

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

GregoryL_Azou — Mon, 07 Mar 2016 18:29:43 GMT

Glad to hear Martha. Unfortunately I don't have such a documentation but I will work on that for next release.

Here is the couple of rules that I have in mind:

- to style your html, you can't use the style property, you have to assign your element a class like <p class="p1">foo</p> and then use a style tag <style>.p1 { color: red; }</style>

- not all HTML tag are supported so far, main one not supported is the span tag, I will try to fix for next release. To replace it you can use <div class="inlinediv">foo</div><style>.inlinediv{ display: inline-block; }</style>

- all standard HTML properties should be supported except the style property that we can't support for technical reason, there is no plan to add support for it in near future

- the div tag is supported but the p tag should be preferred when possible as it's the editor prefered tag. Note that using div tag inside p tag and vice versa is known to cause issues

- if when you save your section, a tag is not supported, the tag and it's content will either be deleted or the content may be conversed and replaced by a generic p tag depending on the context. When using new tag you want to be careful and save a copy of your markup

- there is no limitation in term of CSS rules that are supported in style tag

- the CSS rules created with style tag are global to the whole Journal so you don't need to duplicate them in every section

- if you want section specific rules, you can use something like .section:nth-child(2) .p1 { } to target only the section section

Regarding changing line-height, it seems that using line-height: 20px; is working for me

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

MarthaSelig1 — Mon, 07 Mar 2016 19:42:23 GMT

OK, Gregory, so I was close; I didn’t use the class name in each paragraph.

I will stop trying to span across paragraphs. This is definitely an educational exercise.

Thank you once again. I really appreciate your patience.

Thanks,

Martha

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

OwenGeo — Mon, 04 Apr 2016 14:40:46 GMT

We've published a blog about this issue here: Using custom HTML in Map Journal.

Also this blog was mentioned in comments above: Create buttons for Main Stage Actions using the style tag