This issue leaves me scratching my head as I do not understand if this is a bug or if I’m just not getting the way the Fred editor works when it comes to elements. I have tried this with creating an embedded drop zone in an element as well but that is not working either.
Here is the issue. I have a client that will be editing their meetings info. Part of this is an embedded Google Map to the venue. I have a simple container in which I have two columns (Bootstrap). One is set to 8 the other 4. The map goes in the 4 width column to the right.
If I set options in my element to add in the code, Fred simply will not save the changes. I can see the ‘Open Settings’ option and it looks fine. But when I apply the change, nada. Will not save. And as soon as I drag in the main element I see an error in the console related to this twig coding. I understand that nothing is being set as far as data yet, but odd that this is happening.
Now, I made a simple element with the exact same option code (but without any styling) and if I drop that on the page everything works fine! I can change the text, add in Google Maps code, whatever.
So I know the coding below works fine. Just not when you are using it inside embedded divs to create structure. Am I missing something obvious or is this a bug?
Options:
{
"remote": true,
"settings": [
{
"name": "map_code",
"label": "Map Code",
"type": "text",
"value": "Enter Google Map code here..."
}
]
}
Markup:
{% autoescape %}
{{ map_code|raw }}
{% endautoescape %}
And here is the code for the structured element to create the client’s styling:
<div class="container" style="margin-top:30px;" data-fred-name="UpcomingMeetingsData" data-fred-editable="true" data-fred-rte="true">
<div class="col-md-8">
<p class="meeting-title">TITLE HERE...</p>
<p class="meeting-presenter"><i>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>
<p class="text-left">
<button type="button" class="btn btn-default">
<a href="#">Detailed Event Information</a>
</button>
</p>
<p class="meeting-info"><b>Date</b>: blah blah </p>
<p class="meeting-info"><b>Time</b>: blah blah </p>
<p class="meeting-info"><b>Location</b>: blah blah </p>
<p class="text-left">blah blah blah blah blah blah blah blah blah blah.</p>
<p class="meeting-button">
<button type="button" class="btn btn-default">
<a href="#">Online Event registration</a>
</button>
</p>
</div>
<div class="col-md-4 map-margin" data-fred-editable="true">
{% autoescape %}
{{ map_code|raw }}
{% endautoescape %}
</div>
<div class="col-xs-12">
<p class="text-left"> <b class="meeting-title">blah blah blah blah!</b></p>
<p class="text-left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <b>Pay Now</b> button below.</p>
<p class="text-left">We look forward to having you and your organization part of our event.</p>
<p class="text-left">
<button type="button" class="btn btn-default">
<a href="#">Form</a>
</button>
</p>
</div>
</div>
This simple gif hopefully will play to show what I mean.
