[Fred] Problems with drag and drop of nested elements. Elements disappear when changing their options after placement

[jnogueira]

Hi All,

I am facing a strange behavior with Fred.

My current setup:
Modx 2.71 and Fred 1.0

I have a block defined on the elements with the following code:

	<section class="container-fluid py-5 {{ PanelColor }}" data-fred-block-class="wrapper" data-fred-render="{% if published %}true{% else %}false{% endif %}" id="{{ anchortext|lower|replace({' ': ''}) }}">
		<div class="container px-0 py-4" data-fred-name="general-content-area" data-fred-dropzone="general-content-area" style="min-height:250px">
			<h4 class="text-uppercase m-0 font-weight-bold {{ MainTitlesTextColor }}{% if GeneralContentBlockShowMainTitle %}{% else %} d-none{% endif %}" data-fred-name="general-content-title-block" style="min-height:14px">Your title here</h4>
			
		</div>
	</section>

When I type the title, no problem is seen. Saves perfectly well even if I want to change my options defined by the option_set.

Then I created two new elements:

1. A heading
2. a paragraph.

Here is the code and the option_set for the Heading:

<{{ GenericHeaderSize }} class="mt-3 {{ GenericHeaderThikness }} {{ GenericHeaderCapitalize }} {{ GenericHeaderPlacement }} {{ GenericHeaderColor }}" data-fred-name="generic-heading-sub-block" style="min-height:14px"> </{{ GenericHeaderSize }}>

//Option_set
{
  "remote": true,
  "settings": [
    {
      "name": "GenericHeaderSize",
      "label": "Title Size",
      "type": "select",
      "options": {
        "h2": "Header Size 2",
        "h3": "Header Size 3",
        "h4": "Header Size 4",
        "h5": "Header Size 5",
        "h6": "Header Size 6"
      },
      "value": "h2"
    },
    {
      "name": "GenericHeaderThikness",
      "label": "Title Thickness",
      "type": "select",
      "options": {
        "font-normal": "Default (no selection)",
        "font-weight-bolder": "Bolder",
        "font-weight-bold": "Bold",
        "font-weight-normal": "Normal",
        "font-weight-light": "Light",
        "font-weight-lighter": "Lighter"
      },
      "value": "font-normal"
    },
    {
      "name": "GenericHeaderCapitalize",
      "label": "Title font transform",
      "type": "select",
      "options": {
        "text-normal": "Default (no selection)",
        "text-lowercase": "All text in lowercase",
        "text-uppercase": "All text in uppercase",
        "text-capitalize": "First letter as capital"
      },
      "value": "text-normal"
    },
    {
      "name": "GenericHeaderPlacement",
      "label": "Title alignment",
      "type": "select",
      "options": {
        "text-left": "Left",
        "text-center": "Center",
        "text-right": "Right"
      },
      "value": "text-left"
    },
    {
      "name": "GenericHeaderColor",
      "label": "Title Color",
      "type": "colorswatch",
      "value": "plainblue",
      "options": [
        {
          "value": "plain-blue",
          "color": "#124191",
          "label": "Blue"
        },
        {
          "value": "light-blue",
          "color": "#00C9FF",
          "label": "Light Blue"
        },
        {
          "value": "dark-blue",
          "color": "#001135",
          "label": "Dark Blue"
        },
        {
          "value": "plain-grey",
          "color": "#343434",
          "label": "Grey"
        },
        {
          "value": "light-grey",
          "color": "#ebebeb",
          "label": "Light Grey"
        },
        {
          "value": "white",
          "color": "#ffffff",
          "label": "White"
        }
      ]
    }
  ]
}

And the code and the option_set for the Paragraph:

<p class="mt-2 {{ GenericTextSize }} {{ GenericTextThikness }} {{ GenericTextColor }}" style="min-height:14px" data-fred-name="generic-text-sub-block" data-fred-rte="true" data-fred-rte-config="simple"></p>

//option_set
{
  "remote": true,
  "settings": [
    {
      "name": "GenericTextSize",
      "label": "Text Size",
      "type": "select",
      "options": {
        "text-075rem": "12px",
        "text-08125rem": "13px",
        "text-0875rem": "14px",
        "text-09375rem": "15px",
        "text-normal": "16px",
        "text-1125rem": "18px",
        "text-125rem": "20px"
      },
      "value": "text-normal"
    },
    {
      "name": "GenericTextThikness",
      "label": "Text Thickness",
      "type": "select",
      "options": {
        "font-normal": "Default (no selection)",
        "font-weight-bolder": "Bolder",
        "font-weight-bold": "Bold",
        "font-weight-normal": "Normal",
        "font-weight-light": "Light",
        "font-weight-lighter": "Lighter"
      },
      "value": "font-normal"
    },
    {
      "name": "GenericTextColor",
      "label": "Text Color",
      "type": "colorswatch",
      "value": "plainblue",
      "options": [
        {
          "value": "plain-blue",
          "color": "#124191",
          "label": "Blue"
        },
        {
          "value": "light-blue",
          "color": "#00C9FF",
          "label": "Light Blue"
        },
        {
          "value": "dark-blue",
          "color": "#001135",
          "label": "Dark Blue"
        },
        {
          "value": "plain-grey",
          "color": "#343434",
          "label": "Grey"
        },
        {
          "value": "light-grey",
          "color": "#ebebeb",
          "label": "Light Grey"
        },
        {
          "value": "white",
          "color": "#ffffff",
          "label": "White"
        }
      ]
    }
  ]
}

When I drag and drop a title or a paragraph into the first div, all OK. But as soon as I access to each setting as per the option_set and change an option, the element immediately disappears.
This is happening with both (heading and paragraph elements).

Even if I don’t change any option after drag and drop, and even after typing text, after saving, nothing is there.

I tried a lot of things, like defining or omitting data-fred-name, data-fred-editable (along with name), data-fred-dropzone with same name as of data-fred-name and also different names, checked for dupplicated names of data-fred-name, checked the Fred demo theme that has a similar concept, etc.

Nothing helped.

I am also facing a lot of fred glitches:

Some difficulties changing between the Paragraph, heading and the parent element block.

Do you have any idea of what I am doing wrong?
I am considering to give up on Fred due to these problems and also due to the steep learning curve (Documentation and examples on the web do not help a lot).

Thanks in advance.

[digitalpenguin]

A huge amount of bugs have been fixed in the upcoming version 1.1
You can try the beta2 version from here and see if it fixes it: https://github.com/modxcms/fred/releases

Otherwise if the problem still persists, add an issue at https://github.com/modxcms/fred/issues
The devs are looking for any other bugs before the stable release.

[jnogueira]

Thank you.
I will try this today and share the outcome.

Cheers

[jnogueira]

Hi @digitalpenguin,

After installing Fred 1.1.0 beta2, unfortunately the original problem remains (the visual glitches are solved).
The odd thing is that on the original fred template, it is working properly.
I will need to dig a bit more.

Thanks for your support anyway.
Cheers

[bobray]

Take a look in the DB and see if the elements have the correct parent.

There used to be a similar problem with resources being dragged around in the tree. Sometimes a resource would end up with itself as a parent or two resources would have each other as parents. This caused them to disappear from the display.

Also, check that the element’s category exists.

[jnogueira]

Hi All,

@bobray, thank you for your tip.
In fact it was exactly because of your tip that I found out what was wrong along with code inspection of the fred demo template.

On a simplistic way, the problem was related with too many data-fred-name over the nested elements.
In fact, I didn’t change the code that much.

Here is what I did:
On the template itself (that is having the bind to fred), I removed data-fred-name, and preserved this:

	<div data-fred-dropzone="content" data-fred-target="content" style="min-height: 500px">
	    [[*content]]
	</div>

Then, on the block where I was intending to place heading blocks and paragraph blocks, this is what changed:

    <section class="container-fluid py-5 {{ PanelColor }}" data-fred-block-class="wrapper" data-fred-render="{% if published %}true{% else %}false{% endif %}" id="{{ anchortext|lower|replace({' ': ''}) }}">
		<div class="container px-0 py-4">
			<h4 class="text-uppercase m-0 font-weight-bold {{ MainTitlesTextColor }}{% if GeneralContentBlockShowMainTitle %}{% else %} d-none{% endif %}" data-fred-name="general-content-block">Section Title</h4>
			
			<div class="row py-5">
				
				<div class="col-12 {{ GeneralTextColor }}" data-fred-dropzone="general-content-drop-area" style="min-height:250px">
				
				</div>
				
			</div>
		</div>
	</section>

Again, no data-fred-name, just the data-fred-dropzone.Only having Fred name for the h4 itself in order to be editable.

Now the elements meant to be dragged into above div with dropzone:

HeadingBlock:
<{{ GenericHeaderSize }} class="mt-3 {{ GenericHeaderThikness }} {{ GenericHeaderCapitalize }} {{ GenericHeaderPlacement }} {{ GenericHeaderColor }}" data-fred-name="GenericHeader">Change me</{{ GenericHeaderSize }}>

GenericTextBlock:
<div class="mt-2 {{ GenericTextSize }} {{ GenericTextThikness }} {{ GenericTextColor }}" data-fred-name="GenericTextBlock" data-fred-rte="true" data-fred-rte-config="simple">Type your text here</div>

That’s it!

Working like a charm.
Now I can add whatever I want, it saves perfectly and I can even put as many blocks as I want sequentially with no issues at all.

I am not sure if this was also the solution while having Fred 1.0, but with 1.1.0 Beta2 works.

Cheers @bobray and @digitalpenguin and thanks again!

[bobray]

I’m glad you got it sorted. Thanks for the report.