** This issue is when using the Fred editor and not in the main MODX panel. **
This is so strange. Racked my brain all day on this and eventually got to a solution that works for any element with the button tag I use in various places on my client’s site. But I have no idea WHY this works the way it does!!
It’s all in the style from what I can tell. Example:
This is the original. Simply adding a button inside a paragraph tag. This is what fails:
<p class="text-left">
<button type="button" class="btn btn-default">
<a href="#">Sponsorship Request Form</a>
</button>
</p>
Does not matter if I used a p or a div. Results the same. I noticed that in another area of the site that the client does not have to edit, there is also a button. Same code structure and I can remove the link, add a new one, remove it again, etc… and the button never disappears!
The ONLY difference was the class I was using. ‘center-flex’.
<div class="center-flex">
<button type="button" class="btn btn-default">
<a href="#">Sponsorship Request Form</a>
</button>
</div>
I could make this a p or div like shown. Didn’t matter. Worked fine. At first, I thought that my original style of ‘text-left’ was an issue since all it does is justify the text. But that should not cause the tags to disappear when adding a link!! In some areas of the page, a left-justified button looks better so why I used it.
I tried other styles and they ALL made the <button> tag disappear. Only the ‘center-flex’ works to NOT make the <button> tag disappear.
Works:
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
Does not work (among others I tested):
.text-left {
text-align: left;
}
.social {
padding: 0;
margin: 0;
list-style: none;
position: relative;
z-index: 100;
}
This is so strange.
My editor configs (I even uninstalled, removed, and did a clean install, same thing):
