Answers

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

  August 19

  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
• chbocca Posts: 110Questions: 16Answers: 1

  October 3

  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
• allan Posts: 65,166Questions: 1Answers: 10,797 Site admin

  October 4

  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
• chbocca Posts: 110Questions: 16Answers: 1

  October 4

  To get the check mark on hover.

  No? I am doing it wrong?

  c
• chbocca Posts: 110Questions: 16Answers: 1

  October 4

  Perhaps I just simply remove the custom css on click?
• allan Posts: 65,166Questions: 1Answers: 10,797 Site admin

  October 4 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
• chbocca Posts: 110Questions: 16Answers: 1

  October 4 edited October 4

  Yay!

  Updated demo here.

  Thank you (yet again)!