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!

[MarthaSelig1]

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

[GregoryL_Azou]

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

[MarthaSelig1]

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

[OwenGeo · Accepted solution]

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​