How to fix user data display and scrolling in a Webflow comment section template? Answered

• 

  A J

  • December 08, 2024 07:36

  Hey ilyas el megarbi,

  1. Make sure you set the first name and last name of the member to be public in the section shown in screenshot #1. The way you can do this is, Edit the specific custom field --> Scroll down to advanced / commenting section and select Public. Make sure to do this for both first name and last name custom fields. Regarding Profile picture, are you able to see the profile picture in memberstack dashboard but not in the commments? If so, could you share a screenshot of how it looks? Since I don't have access to test the commenting feature on live site without actually buying the course.
  2. For this I would want to test the commenting feature as a user, do you have a test user credential that you can share so that I can test it from my end?
  3. In order to enable the scrollbar, have you added any custom settings? I was not able to find the relevant scroll setting on style editor. In case you have and still it isn't working, it brings me back to second point, is there a way I can test this commenting feature from my end?

  

  0
• 

  ilyas el megarbi

  • December 08, 2024 07:37

  A J you can sign up here https://www.skill.ma/sign-up and then go to this link:
  https://www.skill.ma/web-app/communities/skill-original-community

  I've set the first name and last name to public and it worked, what about the profile image?

  0
• 

  A J

  • December 08, 2024 07:38

  Hey ilyas el megarbi, I tested this out from my end.

  1. It is weird that even though the image has the right source of the profile image stored in MS, it is being overridden by the default placeholder image's responsive settings. I am not sure if there is a custom code / some 3rd party script interfering with this to bring up this issue, but I am wondering from where did you fetch the commenting component you are using in the community page? I can see that this is different from the ones used in the lessons template as all of the classes are different in the community comment section. Could you share the component via which you cloned this setup? Maybe we can see how the cloneable is performing and what difference is there in the site.
  2. Delete post div is actually showing up but just not within the screen view, because of the position settings you have enabled for comment-delete-box div (shown in screenshot #1). Once you reset this setting, you must be able to see the delete box button on the live site.
  3. I can see you have enabled the overflow property to scroll, but for the complete setup, you have to set a fixed height (highlighted in screenshto #2) that you want the community-chat-div to have and based on that height the scroll would become functional on the live site

  

  

  0
• 

  ilyas el megarbi

  • December 08, 2024 07:40

  A J The Delete Box Worked Pefectly But for The Scrollbar, I've given the height to community-chat-div But when publiching Live Is Not Working. and for the comenting component that I copied is this:
  https://www.memberstack.com/webflow/commenting-ui

  0
• 

  A J

  • December 08, 2024 07:42

  Hey ilyas el megarbi, okay in that case alternatively have the overflow and height property in the c-comment-has-posts div, doing so should reflect the scrollable tendency as shown in screenshot.

  And I tested out the component that you shared, the live site seems to be working on my end when I clone it and unfortunately I was not able to replicate the issue from my site. The profile picture seems to be populating accurately as shown in screenshot #2. Is the profile picture working on the Lessons template of the courses? If yes, you could try copy pasting it to your community page and customize the design as you like, or if you want the exact component you can try cloning it to a dummy page and checking if there is any difference.

  

  0
• 

  ilyas el megarbi

  • December 08, 2024 07:43

  A J The profile picture it's not working also in the lesson page template

  I checked there is no cutom code in the community besides the hide the scroll bar, I don't think that there is a code interfiring with it

  Any Updates?

  0
• 

  A J

  • December 08, 2024 07:43

  Hey ilyas el megarbi, if it's not working in lessons template as well, it is likely possible that something on the site-wide is affecting the images. It could be site-wide code / 3rd party plugin / library etc. So to test it, you can clone this in a separate site and publish it to see if you are able to see the profile pictures accurately, which should be the case since I did exactly that and it seems to work as well.

  However, since I am not sure about the site setup and what is interfering with the images as of now, I have a workaround for this, which atleast will make the images valid and follow Memberstack data. You can add this custom code to the before </body> section of all the pages where commenting is enabled.

  <script> 
  document.addEventListener("DOMContentLoaded", function() { 
  setTimeout(function() { 
  for (var i = 0; i < document.getElementsByClassName("c-comment-img").length; i++) { document.getElementsByClassName("c-comment-img")[i].srcset = ""; 
  } 
  }, 2000); 
  }); 
  </script>

  I have tested this code personally on my end and it should override the interference in your case. Hope this helps.
  0
• 

  ilyas el megarbi

  • December 08, 2024 07:46

  A J The Code Worked Perfectly, Thanks again for your help

  0

Please sign in to leave a comment.