In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels.
The comment.level attribute is being employed to establish the padding value. Consequently, a comment.level of 0 denotes the parent (hence no padding), a reply to that parent comment would hold a comment.level of 1 (thus necessitating padding of 1), and a subsequent reply would possess a comment.level of 2 (mandating padding of 2). As a result, this structure yields an indentation such as pl-0 for the parent comment, pl-1 for the first reply, and pl-2 for the second reply.
{% load mptt_tags %}
{% if not node.is_leaf_node %}
{% for comment in comments %}
{% if comment.level > 0 and comment.tree_id == tree_id %}
<div class="pl-{{ comment.level }} mt-2">
<div class="relative grid grid-cols-1 gap-4 p-4 mb-4 border rounded-lg bg-white shadow-lg">
<div class="relative flex gap-4">
<div class="flex flex-col w-full">
<div class="flex flex-row justify-between">
{% if not comment.deleted %}
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{ comment.level }}</p>
{% else %}
<p class="relative text-xl whitespace-nowrap truncate…
Encountering difficulty wherein the padding appears to be disregarded despite being correctly reflected in the DOM as evidenced by replies having padding labels like pl-3. My assumption revolves around the parent div possibly hindering the application of padding, though resolving this remains elusive.
The activation of the "see replies…" button in the snippet below triggers an AJAX call, subsequently loading the aforementioned code block.
{% if comments %}
{% load mptt_tags %}
{% recursetree comments %}
<div class="relative grid grid-cols-1 gap-4 p-4 mb-4 border rounded-lg bg-white shadow-lg">
<div class="relative flex gap-4">
<div class="flex flex-col w-full">
<div class="flex flex-row justify-between">
{% if not node.deleted %}
<p class="relative text-xl whitespace-nowrap truncate overflow-hidde…
To aid visualization, an image demonstrating the lack of inward indentation for replies within the post has been provided here: https://i.sstatic.net/tlY0H.png.