Export GIF Looks Weird

Export GIF Looks Weird

chboccachbocca Posts: 110Questions: 16Answers: 1

Hi again.

Been seeing this weird gif when I export using csv or excel ... looks like broken arrow? Will try and post test case, but in mean time just thought I flow to see if icon is as intended. The export works fine, just the icon/gif that I'm questioning.

Using css:

https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.3.2/b-3.2.4/b-colvis-3.2.4/b-html5-3.2.4/b-print-3.2.4/cr-2.1.1/fc-5.0.4/fh-4.0.3/rr-1.5.0/sl-3.0.1/datatables.min.css

Using js:

https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.3.2/b-3.2.4/b-colvis-3.2.4/b-html5-3.2.4/b-print-3.2.4/cr-2.1.1/fc-5.0.4/fh-4.0.3/rr-1.5.0/sl-3.0.1/datatables.min.js

Thanks, as always, in advance.

c

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 65,166Questions: 1Answers: 10,797 Site admin

    Seems to be working okay for me here: https://live.datatables.net/sugasogi/1/edit . That is using those two files.

    Can you link to a test case showing the problem please?

    Allan

  • chboccachbocca Posts: 110Questions: 16Answers: 1

    Thanks Allan.

    Sorry for delay in getting the demo.

    The issue appears to be css related.

    In demo here, I have one drop-down button with working gif and a second showing a corrupted gif, which is what I'm seeing on our production site, if even more so.

    Just click on copy or csv in either drop-down.

    Here's the css that appears to be causing issue:

    .dt-button.export:hover::after { position: absolute; top: 50%; margin-top: -10px; right: 1em; display: inline-block; content: "✓"; color: inherit; }

    Any clues?

    Grazie, ancora!

    c

  • allanallan Posts: 65,166Questions: 1Answers: 10,797 Site admin

    Its coming from your custom style:

    .dt-button.export_copy_issue:hover::after,
    .dt-button.export_csv_issue:hover::after {
      ...
    }
    

    That is putting a tick inside the pseudo element.

    I'm not entirely sure what the aim of that style is?

    Allan

  • chboccachbocca Posts: 110Questions: 16Answers: 1

    To get the check mark on hover.

    No? I am doing it wrong?

    c

  • chboccachbocca Posts: 110Questions: 16Answers: 1

    Perhaps I just simply remove the custom css on click?

  • allanallan Posts: 65,166Questions: 1Answers: 10,797 Site admin
    Answer ✓

    Oh I see. The checkmark would normally be used to show if a button is active or not, not for a hover state (which would normally be a text and / or background colour change).

    The ::after pesudo element is used for the processing display, and therefore can't be used also for the checkmark (otherwise you get a weird effect like you are).

    What you could do is use ::before instead, which isn't being used.

    Allan

  • chboccachbocca Posts: 110Questions: 16Answers: 1
    edited October 4

    Yay!

    Updated demo here.

    Thank you (yet again)!

Sign In or Register to comment.