Styling issue with comment query

Bugs
1

I am following the Comments template from A to Z tutorial to create a comment section. I want to show all approved comments and unapproved comments in case it is the comment’s author viewing the page.

The layout I want to achieve are discussions divided by a line separator. I am defining a discussion as a comment and all of its replies. Below is an example of the layout:

image
image852×665 24.7 KB

To style the discussion, I’m targeting the div with the cc-query-item class with relative styling. The problem with this is that the div element of the cc-query-item of an unapproved comment is always rendered on the frontend. Even if the user viewing the page is not the unapproved comment’s author. What I end up with is an extra separator. See below:

image
image848×562 15.8 KB

image
image956×139 9.81 KB

I’m not able to figure out a way to not render a div element of an unapproved comment (if the user is not the comment’s author). The only class it has is the cc-query-item and it’s shared with all other comments.

Any idea how to solve this? Maybe there is a much simpler approach I’m missing.

2

Hi @nadim,

There seem to be two straightforward solutions depending on the specifics of your case:

  1. If the .cc-query-item divs are empty - apply a relative style to the query template for .cc-query-item:empty with display: none;
  2. Move your separator line to the inner div (the one with the .comment class)
3

Hi @StrangeTech ,

Thanks for looking into this.

The second solution does not work because .comment class is given to every comment, even if it’s a reply to different comment. I want have the line separate between groups of comment (what I call discussions).

The first solution should work but maybe I am doing something wrong. The .cc-query-item div is not empty, but its child is. See below (comment-41):

image
image998×174 13.1 KB

Trying to target the inner div (#comment-41) is not working for me. I tried this rule:

.query-cac4242 .cc-query-item .cc-query:empty {
    display: none
}

And this:

.query-cac4242 .cc-query-item .comment:empty {
    display: none
}
4

How are you currently styling the line?

Depending on the answer to this, it may be simple to hide the line using relative styles.

5

I am targeting cc-query-item with relative styling and adding a bottom border.

image

image
image281×598 11.7 KB

6

Wrapping the entire contents of your Query Template with a Div block with a class (e.g. comment-group) and changing the relative style to target that instead may solve the issue - because you can then apply the relevant visibility condition/s to that instead.

7

Unfortunately this doesn’t work. Wrapping the entire content of the Query Template ends up wrapping a single comment. Here is what Cwicly outputs without wrapping the content of the Query Template:

<div id="query-xxxx" class="query-yyyy">
  <div id="query-template-xxxx" class="query-template-yyyy">
    <div class="cc-query-item"> <!-- Holds top level comment and its replies -->
      <div id="comment-nn" class="comment c-query"> <!-- Holds a single comment -->
      </div>
      <div class="cc-query-child"></div> <!--Holds replies to comment-nn -->
    </div>
    <div class="cc-query-item"></div>
    <div class="cc-query-item"></div>
    <div class="cc-query-item"></div>
  </div>
</div>

This is what Cwicly outputs after wrapping the Query Template:

<div id="query-xxxx" class="query-yyyy">
  <div id="query-template-xxxx" class="query-template-yyyy">
    <div class="cc-query-item"> <!-- Holds top level comment and its replies -->
      <div id="comment-nn" class="comment c-query"> <!-- Holds a single comment -->
        <div class="comment-group">  <!-- This div wraps all the content of the Query Template -->
        </div>
      </div>
      <div class="cc-query-child"></div> <!--Holds replies to comment-nn -->
    </div>
    <div class="cc-query-item"></div>
    <div class="cc-query-item"></div>
    <div class="cc-query-item"></div>
  </div>
</div>

I’m finding no way to wrap the cc-query-item div.

8

Yes, I did a quick test and confirm exactly what you are seeing.

@Araminta, as you did the useful demo video, is there any advice you can give?

As the comments query behaves slightly differently, and the hierarchical output is only nested with the cc-query-item, the usual strategies don’t work for it.