Snippet position moved by fred

[davidpede]

I have an element like so:

<div data-fred-block-class="col-12">
  {% if folder_source %}
    <table class="media-table table datatable-show-all datatable-sorting">
      <thead>
        <tr>
          <th class="{% if sortCol == 'col-0' %} {{ sortDir }} {% endif %}">File Name</th>
          <th class="{% if sortCol == 'col-1' %} {{ sortDir }} {% endif %}">Uploaded</th>
          <th class="asc">File Size</th>
          <th class="text-center nosort nosearch">Actions</th>
        </tr>
      </thead>
    <tbody>
      [[!FileDownload?
      &getDir=`{{ folder_source }}`
      &browseDirectories=`1`
      &groupByDirectory=`0`
      &directLink=`1`
      &tplWrapper=``
      &tplFile=`mediaLibFileTpl`]]
    </tbody>
  </table>
  {% else %}
    <p>Please select a Data Source for this table from Element Settings menu.</p>
  {% endif %}
</div>

"remote": true is set on the element.

After a rebuild everything looks fine, however when I save the page in frontend with fred the 'FileDownload' snippet output has moved position in the html which breaks the markup:

<div data-fred-block-class="col-12">
  {% if folder_source %}
    // --> FileDownload snippet output appears here in HTML markup <--
    <table class="media-table table datatable-show-all datatable-sorting">

If I rebuild again then element output is correct until the next save.

Any advice on this?

[theboxer]

Can you try and change your element's markup to not use table but just div?

<div data-fred-block-class="col-12">
  {% if folder_source %}
    <div>
      <div>

          <span class="{% if sortCol == 'col-0' %} {{ sortDir }} {% endif %}">File Name</span>
          <span class="{% if sortCol == 'col-1' %} {{ sortDir }} {% endif %}">Uploaded</span>
          <span class="asc">File Size</span>
          <span class="text-center nosort nosearch">Actions</span>

</div>
<div>
      [[!FileDownload?
      &getDir=`{{ folder_source }}`
      &browseDirectories=`1`
      &groupByDirectory=`0`
      &directLink=`1`
      &tplWrapper=``
      &tplFile=`mediaLibFileTpl`]]
</div>
  </div>
  {% else %}
    <p>Please select a Data Source for this table from Element Settings menu.</p>
  {% endif %}
</div>

[theboxer]

I know that the output might be different, just want to check if it's an issue with rendering table, or something else...

[theboxer]

so I gave it a shot and it's as I thought. The markup you are creating is not valid HTML (I know it is at the end when everything renders, but not when the resource is saved).

[[!FileDownload?
      &getDir=`{{ folder_source }}`
      &browseDirectories=`1`
      &groupByDirectory=`0`
      &directLink=`1`
      &tplWrapper=``
      &tplFile=`mediaLibFileTpl`]]

This part is not valid children for tbody and when the resource is saved, it gets removed by JS/browser/something outside of the table (you can review that if you quick edit the resource and check the saved HTML in the content area).

My suggestion would be to use tplWrapper property on the snippet and put all the table markup there, so the HTML that will get saved to resource is valid, or leave it as is but put it into the chunk.

Chunk:

<table class="media-table table datatable-show-all datatable-sorting">
      <thead>
        <tr>
          <th class="">File Name</th>
          <th class="">Uploaded</th>
          <th class="asc">File Size</th>
          <th class="text-center nosort nosearch">Actions</th>
        </tr>
      </thead>
    <tbody>
      [[!FileDownload?
      &getDir=`[[+folder_source]]`
      &browseDirectories=`1`
      &groupByDirectory=`0`
      &directLink=`1`
      &tplWrapper=``
      &tplDir=`mediaLibFileTpl`
      &tplFile=`mediaLibFileTpl`]]
    </tbody>
  </table>

Element:

<div data-fred-block-class="col-12">
  {% if folder_source %}
    [[$files? &folder_source=`{{ folder_source }}`]]
  {% else %}
    <p>Please select a Data Source for this table from Element Settings menu.</p>
  {% endif %}
</div>