How to change the shape and text of a Clipboard component?

Dash Python
1

Hello all, Happy new year!

I need to make a Clipboard component look different. Specifically I need to make it look like a Button that includes the text “Copy Data”.

I don’t see any properties for the Clipboard that enable me to change it this way. I’ve tried to use javascript’s appendChild() to inject HTML into the top-level div for the Clipboard but I ran into a timing problem. That is, when my code below runs the window is loaded but React has yet to embed thediv in the DOM and my_clipboard is null).

window.addEventListener('load', function(event) {
  let my_clipboard = document.getElementById("my-clipboard");
  let text = document.createTextNode("Copy Data");
  my_clipboard.appendChild(text);
});

Might anyone be able to help me with my timing issue or suggest a different approach to change how the Clipboard component looks?

Thanks,
urig

1 Like
2

Hi @urig

I agree, it should be easier to style Clipboard. I think I can do a PR to fix this.

In the meantime, a workaround is make a button and style it any way you like, then position the dcc.Clipboard on top of it and make it transparent so you don’t see the icon. Here is an example:

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc


app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = dbc.Container(
    [
        html.H3("Copy To Clipboard Demo"),
        dbc.Button(
            [
                "copy data",
                dcc.Clipboard(
                    id="clipboard",
                    target_id="textarea",
                    className="position-absolute start-0 top-0 h-100 w-100 opacity-0",
                ),
            ],
            className="position-relative",
            color="secondary",
        ),
        html.Div(dcc.Textarea(id="textarea", value="data to copy")),
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes
3

Thank you Ann Marie! I’ll give it a try first thing tomorrow morning. Cheers, Uri

1 Like
4

Hello,

Happy 2022 :slight_smile:

Just wanted to update that this worked well as a workaround. Many thanks @AnnMarieW !

Best,
urig

1 Like
5

Confirming that you can change the color by adding a className (eg. “copy-button”), and adding the following to your css styles file.

.copy-button {
  color: #123456;
}