0 appearing on page load when scroller is on, disappears as soon as user clicks anywhere.

0 appearing on page load when scroller is on, disappears as soon as user clicks anywhere.

bfarkasbfarkas Posts: 181Questions: 48Answers: 0

I have scroller enabled and ben playing around. When I have it enabled, a 0 frequently shows in the bottom leftcorner of the table on page load. Once you click anywhere on the table it disappears completely. If I disable scroller it stops showing at all.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    I don't see that happening with this example. Can you post a screenshot so we can see what is happening?

    Better is a link to your page or a test case showing the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    I would search the source code to make sure there isn't a 0 (typo) somewhere that shouldn't exist.

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Sure, here is a current link:
    https://newyorklife.acms.com/p8mlmbt0uond/

    I have searched and did not find an extra 0, although to reiterate, it never shows if scroller is off, this only appears when i activate scroller.
    As soon as you click anywhere on the table, it instantly disapears.

    Here is a screenshot as well:

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    Thanks for the test case. I found <div class="dts_label">0</div> using the browser's inspector. Searching the forum for dts_label results in this thread among others. I'm not sure of all the CSS files you are loading. Do you have scroller.css?

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Ah, nice lead. So I was including the scroller css, but because I was using the foundation theme, the foudation scroller css is missing the style for the div.dts div.dts_label which is what was showing there.
    I added the following and it solved it, thanks:

    div.dts div.dts_label {
      position: absolute;
      right: 10px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
      text-align: right;
      border-radius: 3px;
      padding: 0.4em;
      z-index: 2;
      display: none;
    }
    
This discussion has been closed.