The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
Tools action menu p...
 
Share:
Notifications
Clear all

Issue Tools action menu pushes content down and requires scrolling on some screen sizes

3 Posts
1 Users
0 Reactions
73 Views
Posts: 5
Topic starter
(@billy)
Active Member
Joined: 10 months ago

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!

2 Replies
Posts: 5
Topic starter
(@billy)
Active Member
Joined: 10 months ago

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');
});
Reply
Posts: 5
Topic starter
(@billy)
Active Member
Joined: 10 months ago

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
        });
    }
});

 

Reply
Share: