MODX Community

Button Code or Stylings Deleted After Removing URL

This is odd and has my client scratching their head. They came to me stating that every time they add a valid URL to a button in their element, the button goes away and it is just linked text. They have multiple buttons on the page and I could never reproduce it, until today. I saw that they were doing and it happened for me as well.

When you remove a link using the Insert/Edit Link option, then add a URL back, it removes all formatting of the surrounding HTML tags. The images below show what happens. Can anyone explain why? I tried multiple solutions and nothing works. The code always gets rewritten.






6




Better, avoid to use an RTE for editing sections like that.

1 Like

Is this TinyMCE for Fred, or TinyMCE in the manager?

1 Like

** 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):

FYI, an example of the entire element section that now works, after I made the class change:

<div class="container" style="margin-top:30px;">
   <div class="col-md-8">
   <div class="row" data-fred-name="UpcomingMeetingsInfoOverview" data-fred-rte="true">
         <p class="meeting-title">ADD TITLE HERE...</p>
         <p class="meeting-presenter"><i>ADD A DESCRIPTION OF THE EVENT HERE. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</i></p>
         <div class="center-flex">
            <button type="button" class="btn btn-default">
            <a href="#">Detailed Event Information</a>
            </button>
         </div>
   </div>
   <div class="row" data-fred-name="UpcomingMeetingsInfoDetails" data-fred-rte="true">
      <p class="meeting-info"><b>Date</b>: EXAMPLE: Monday, January 1, 2020</p>
      <p class="meeting-info"><b>Time</b>: EXAMPLE: 6:00 PM Social Hour - 7:00 PM Dinner and Presentations</p>
      <p class="meeting-info"><b>Location</b>: EXAMPLE: Maggiano’s, 240 Oak Brook Center, Oak Brook</p>
      <p class="text-left">To attend this event, use the Event Registration button below to register and pay for this event.</p>
      <div class="center-flex">
         <button type="button" class="btn btn-default">
         <a href="#">Event Registration</a>
         </button>
      </div>
   </div>
   </div>
   <div class="col-md-4 map-margin">
      <div id="mapzone">
         {{ map_code|raw }}
      </div>
   </div>
</div>