wpDiscuz - WordPress Comment Plugin
Inline Commenting b...
 
Share:
Notifications
Clear all

[Solved] Inline Commenting breaks Paragraph and styling on Uncode theme

Page 1 / 2

arjan
Posts: 17
Topic starter
(@arjan)
Active Member
Joined: 3 weeks ago

Dear support,

First of all, thank you for creating an amazing plugin!

I am using wpDiscuz on Uncode theme. Uncode uses the WPBakery Page Builder. As I cannot use the Inline Comment button from within the WPBakery Backend Editor (this is only available in Classic Mode editing), I simply add the Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec. Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.

Lorem ipsum dolor sit amet, 

 

Resulting HTML:

 

 

<div class="uncode_text_column"><p>Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipiscing elit. </p><div class="wpd-inline-shortcode wpd-inline-closed" id="wpd-inline-11">Pellentesque venenatis est ut mauris hendrerit imperdiet.<div class="wpd-inline-icon-wrapper"><svg class="wpd-inline-icon wpd-ignored" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-icon-first" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path class="wpd-inline-icon-second" d="M0 0h24v24H0z"></path></svg><div class="wpd-inline-icon-count">0</div><div class="wpd-inline-form-wrapper" style="display: none;"><div class="wpd-inline-form-question">Lorem ipsum<span class="wpd-inline-form-close"><a href="#">x</a></span></div><div class="wpd-inline-form"><form method="post" class="wpd_inline_comm_form" autocomplete="off"><textarea name="wpd_inline_comment" class="wpd-inline-comment-content" placeholder="Je reactie hier ..." required="required"></textarea><label class="wpd-inline-notification"><input name="wpd_inline_notify_me" class="wpd-inline-notify-me" type="checkbox" value="1">&nbsp;Stuur mij een e-mail wanneer er een nieuw antwoord wordt geplaatst</label><div class="wpd-inline-form-second-row"><button class="wpd-inline-submit wpd_not_clicked" type="submit" name="wpd_inline_submit"><span>[REACTIE]</span><svg xmlns="https://www.w3.org/2000/svg" class="wpd-inline-submit-icon" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-submit-icon-first" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path><path class="wpd-inline-submit-icon-second" d="M0 0h24v24H0z"></path></svg></button></div><input type="hidden" id="_wpd_inline_nonce-11" name="_wpd_inline_nonce" value="3ab6ab2b35"></form></div></div></div></div> Nulla ut <a href="#">quam dui</a>. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa <a href="#">volutpat nec</a>.<p></p>
<p>Nulla ultrices <a href="#">ipsum erat</a>, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.</p>
</div>
<div class="uncode_text_column text-lead"><p><strong>Lorem ipsum dolor sit amet, </strong></p><div class="wpd-inline-shortcode wpd-inline-closed" id="wpd-inline-10"><strong>consectetur adipiscing elit.<div class="wpd-inline-icon-wrapper"><svg class="wpd-inline-icon wpd-ignored" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-icon-first" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path class="wpd-inline-icon-second" d="M0 0h24v24H0z"></path></svg><div class="wpd-inline-icon-count">0</div><div class="wpd-inline-form-wrapper" style="display: none;"><div class="wpd-inline-form-question">Lorem ipsum<span class="wpd-inline-form-close"><a href="#">x</a></span></div><div class="wpd-inline-form"><form method="post" class="wpd_inline_comm_form" autocomplete="off"><textarea name="wpd_inline_comment" class="wpd-inline-comment-content" placeholder="Je reactie hier ..." required="required"></textarea><label class="wpd-inline-notification"><input name="wpd_inline_notify_me" class="wpd-inline-notify-me" type="checkbox" value="1">&nbsp;Stuur mij een e-mail wanneer er een nieuw antwoord wordt geplaatst</label><div class="wpd-inline-form-second-row"><button class="wpd-inline-submit wpd_not_clicked" type="submit" name="wpd_inline_submit"><span>[REACTIE]</span><svg xmlns="https://www.w3.org/2000/svg" class="wpd-inline-submit-icon" width="24" height="24" viewBox="0 0 24 24"><path class="wpd-inline-submit-icon-first" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path><path class="wpd-inline-submit-icon-second" d="M0 0h24v24H0z"></path></svg></button></div><input type="hidden" id="_wpd_inline_nonce-10" name="_wpd_inline_nonce" value="3ab6ab2b35"></form></div></div></div></strong></div><p></p>
</div>

 

I have also included the complete example Uncode WPBakery Page Builder code below (can be seen when switching from Backend Editor to Classic Mode):

 

[vc_row][vc_column width="1/1"][vc_custom_heading separator="yes" separator_color="yes" uncode_shortcode_id="429559"]Lorem ipsum[/vc_custom_heading][vc_column_text uncode_shortcode_id="137695"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis est ut mauris hendrerit imperdiet. Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec.

Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.[/vc_column_text][vc_column_text text_lead="yes" uncode_shortcode_id="295809"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_separator sep_color="" uncode_shortcode_id="609536"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_custom_heading separator="yes" separator_color="yes" uncode_shortcode_id="429559"]Lorem ipsum[/vc_custom_heading][vc_column_text uncode_shortcode_id="540413"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nulla ut quam dui. Vestibulum at ullamcorper ex. Fusce tempor malesuada ligula, et pellentesque mauris facilisis eget. Pellentesque sodales vehicula purus quis bibendum. Integer a placerat lectus. Fusce ac dignissim sapien. Pellentesque ex tortor, dapibus eu risus eget, vehicula luctus justo. Ut varius ultrices libero, ornare venenatis massa volutpat nec.

Nulla ultrices ipsum erat, vitae cursus quam viverra nec. Phasellus ac turpis non magna molestie ullamcorper ac sed elit. Nam a mollis justo. Etiam euismod ut nunc vel tempor. Pellentesque eu elit elit. Aliquam erat volutpat. Curabitur ac rutrum purus.[/vc_column_text][vc_column_text text_lead="yes" uncode_shortcode_id="254090"]Lorem ipsum dolor sit amet, [/vc_column_text][/vc_column][/vc_row]

 

Please let me know if you need any more information or access to a demo website.

Kind regards,

Arjan

12 Replies
Asti
Posts: 4894
 Asti
Support
(@asti)
Support member
Joined: 5 years ago

Hello Arjan,

Could you please leave the URL where we can see the issue? 

arjan
Posts: 17
Topic starter
(@arjan)
Active Member
Joined: 3 weeks ago

@Asti, my inlined code is messed up after creating my post and I can no longer edit my post. So I will create a new one below and attach files instead of using the 'code' tags directly in my post.

---

 

Dear support,

First of all, thank you for creating an amazing plugin!

I am using wpDiscuz on Uncode theme. Uncode uses the WPBakery Page Builder.

I cannot use the Inline Comment Button directly from within the WPBakery Page Builder - Backend Editor. Therefore I just add the 'wpdiscuz-feedback' to the Text of the Text Block Element. This will add the Inline Comments.

Unfortunately, it breaks the Paragraph. Also, link styles are no longer working, line heights are incorrect and text color is wrong. I assume this is because styles are somehow overwritten, or because the text is no longer in a paragraph.

I have included images and I have attached text and HTML below.

The top item in the screenshot is without Inline Comments. The bottom item has Inline Comments added.

 

Images

Uncode theme   wpDiscuz test 2
Uncode theme   wpDiscuz test

 

Raw Text (as used in WPBakery Page Builder - Text Block Element):

 

 

 

Resulting HTML output:

 

 

 

Raw WPBakery Page Builder code demo page (by switching to Classic Mode):

 

 

Please let me know if you need any more information or access to a demo website.

Kind regards,

Arjan

1 Reply
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Support member
Posts: 4894

@arjan,

We still need the URL to check the issue. It may be a simple CSS conflict.  

arjan
Posts: 17
Topic starter
(@arjan)
Active Member
Joined: 3 weeks ago

@Asti

I just sent you an email with the login details. I have prepared a development environment, so it does not matter if you make any changes.

Let me know if you need anything else.

1 Reply
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Support member
Posts: 4894

@arjan,

The text which is selected for feedback is being wrapped in a <div> so other parts are separated and inserted in <p> paragraphs. This is designed to use a whole paragraph, which can be line-breaks. So, please don't use a few words in a sentence for the feedback. You should use a text part which can be introduced as a separate paragraph.

2022 06 17 16 34 55
arjan
Posts: 17
Topic starter
(@arjan)
Active Member
Joined: 3 weeks ago

Hi @Amit,

Thanks for getting back to me.

Quoting the whole paragraph with Inline Comments is not really useful for me. Only 1 sentence in the paragraph is actually relevant to the question that is asked in the Inline Comment.

On the wpDiscuz demo page I can see Inline Comments being used on 1 sentence within the paragraph. I would very much like to be able to use this behaviour.

Is this issue caused at wpDiscus or at Uncode theme you think?

Kind regards,

Arjan

arjan
Posts: 17
Topic starter
(@arjan)
Active Member
Joined: 3 weeks ago

Hi @Asti,

I just tried your solution to use wpDiscuz Inline Commenting with a whole paragraph. Unfortunately this also does not work with Uncode theme, as text styling is now broken (wrong line-height, wrong link color, wrong text color).

I have updated the example in my test environment. I sent you the login details on 17-6. I have also included a screenshot below. You can see that the third example in the screenshot uses the whole paragraph, but still gives the wrong result.

Let me know what I can do to help you find a solution. I really love this Inline Commenting feature.

All the best,

Arjan

Uncode theme   wpDiscuz test 3
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Support member
Posts: 4894

Please wait a bit. We'll get back to you very soon.

arjan
Posts: 17
Topic starter
(@arjan)
Active Member
Joined: 3 weeks ago

Thanks @Asti, appreciate it.

Page 1 / 2
Share: