The cog wheel tools/actions/edit menu pushes content below it down and on some screen sizes causes required scrolling in order to see all the menu options.
Has anyone experienced this? So far I'm struggling to discover what CSS could fix this.
This screen recording doesn't show the scrollbar issue, only the content push down issue. But if I can fix this, I think the scrollbar issue may go away too.
Notice how the grey area pushes down as I select the cog wheel.
At one point I thought simply using overflow:hidden on the overall comment area helped, however that causes the menu to be cut off and increasing in z-index doesn't work.
The ultimate solution for me would be to get rid of the pop up menu completely and just have an edit link next to reply. But, that would take me a while to figure out how to do.
Any suggestions? Thanks!
For now, I am going with this jQuery hack. This hides the cog wheel menu (because I personally don't need it) and puts the edit comment link next to reply.
This does not affect brand new comments just submitted via ajax. But, once the page is refreshed, or the next time you visit the page, the edit link changes appear. Which is better than no solution at all... for now.
I'm sure you can add to this to also target ajax events. But, I'm not sure which ajax event to target.
jQuery(document).ready(function($) { // Loop through each comment or reply block $('.wpd-comment, .wpd-reply').each(function() { // Find the reply button within the current comment/reply block var replyButton = $(this).find('.wpd-reply-button'); // Find the edit button within the current comment/reply block var editButton = $(this).find('.wpd_editable_comment').first(); // Check if the edit button hasn't already been moved and move it after the reply button if (!editButton.hasClass('edit-moved')) { // Move the edit button after the reply button and mark it as moved editButton.insertAfter(replyButton).addClass('edit-moved'); } }); // Apply styles to all moved edit buttons explicitly $('.wpd_editable_comment.edit-moved').css({ 'margin-left': '35px', 'font-size': '14px', 'color': '#999999', 'cursor': 'pointer' }); // Hide the wpd-tools within the wpdcom container $('#wpdcom .wpd-tools').css('display', 'none'); });
I've added mutation observers to ensure this all works as a new comment loads as well. I know there are better ways to do this (if I had more knowledge about this plugin). However, this does everything I wanted.
jQuery(document).ready(function($) { // Function to move and style Edit buttons function moveAndStyleEditButtons() { // Loop through each comment or reply block $('.wpd-comment, .wpd-reply').each(function() { // Find the reply button within the current comment/reply block var replyButton = $(this).find('.wpd-reply-button'); // Find the edit button within the current comment/reply block var editButton = $(this).find('.wpd_editable_comment').first(); // Check if the edit button hasn't already been moved and move it after the reply button if (!editButton.hasClass('edit-moved')) { // Move the edit button after the reply button and mark it as moved editButton.insertAfter(replyButton).addClass('edit-moved'); } }); // Apply styles to all moved edit buttons explicitly $('.wpd_editable_comment.edit-moved').css({ 'margin-left': '35px', 'font-size': '14px', 'color': '#999999', 'cursor': 'pointer' }); } // Function to hide the wpd-tools function hideWpdTools() { $('#wpdcom .wpd-tools').css('display', 'none'); } // Initial load handling moveAndStyleEditButtons(); hideWpdTools(); // Hide on initial load as well // Create a MutationObserver to monitor changes in the comments container const commentsContainer = document.querySelector('#wpdcom'); // Replace with the actual ID/class of your comments container const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // Check if new nodes are added to the comments container if (mutation.addedNodes.length) { moveAndStyleEditButtons(); hideWpdTools(); // Hide wpd-tools for newly added comments } }); }); // Start observing the comments container for child node additions if (commentsContainer) { observer.observe(commentsContainer, { childList: true, subtree: true // Observe changes in all child elements as well }); } });