Make copy button smaller / move it to the side?

  • Resolved toasticuss

    (@toasticuss)


    4 years, 7 months ago

    When I use this addon the copy button covers the text it is on. And on mobile screens when you scroll the copy button just sits in the middle of the form looking broken.

    Can this be fixed or improved?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • kim.oj

    (@kimoj)

    4 years, 7 months ago

    Hi
    I stumbled on the same problem and figured out a solution to it.

    In the “Copy to Clipboard” settings page I have added “.code-block-wrap” as the selector and “copy content as” is set to “text”.

    In my function.php file I added 

    add_action( 'wp_footer', 'add_code_block_wrapper' );
function add_code_block_wrapper() { ?>
	<script>
		jQuery( ".wp-block-code" ).wrap( "<div class='code-block-wrap' style='position:relative;''></div>" );
	</script>
<?php
}

    It adds a div around my code and that div is the selector for the copy to clipboard button

    So the end HTML looks like this in the end

    <div class="code-block-wrap" style="position:relative;">
	<pre class="wp-block-code copy-code-block">
		<code>CODE HERE</code>
	</pre>
	<button class="copy-the-code-button" title="Copy to Clipboard">Copy</button>
</div>
    • This reply was modified 4 years, 7 months ago by kim.oj.
    Plugin Author Mahesh Waghmare

    (@mahesh901122)

    4 years, 7 months ago

    Thanks, @kimoj for answering.

    I have now added the option Button Position which add the button to inside or outside the provided selector. Default inside.

    Please update the plugin and check it once.

    For now, I’m setting this topic as resolved. If do you have any other issues then don’t hesitate to create a new topic or comment on this one.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make copy button smaller / move it to the side?’ is closed to new replies.