Double " l "button

Double " l "button

oiq90vqkenvaoiq90vqkenva Posts: 5Questions: 1Answers: 0
edited June 27 in Free community support

Help please

here is my dom below

"<'row'" +
"   <'col-sm-12'" +
"       tr" +
"   >" +
">" +
"<'row px-4 py-2'" +
"   <'col-12 col-md-7 mb-2 mb-md-0 d-flex flex-wrap align-items-center justify-content-start'" +
"       li" +
"   >" +
"   <'col-12 col-md-5 d-flex align-items-center justify-content-end'" +
"       p" +
"   >" +
">",

The 'l dt length' button is duplicated, as shown in the picture

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    I'm not seeing that error if I try to run your dom value: https://live.datatables.net/pisoqezi/1/edit .

    Please link to a test case as required in the forum rules and in the new post template text you deleted.

    Allan

  • oiq90vqkenvaoiq90vqkenva Posts: 5Questions: 1Answers: 0
    edited June 27

    Hey, I have updated here. Sorry for the late response
    https://live.datatables.net/muhuquwa/2/edit

    before, I was using
    Datatable.js v1.10.16

    this is the ui using v1.10.16

  • kthorngrenkthorngren Posts: 21,284Questions: 26Answers: 4,941
    Answer ✓

    Looks like the issue is with the language.lengthMenu option:

    lengthMenu: '<span>Jumlah per halaman:</span> _MENU_',
    

    I removed the span tag and it seems to behave correctly:
    https://live.datatables.net/jeyiduvu/1/edit

    Kevin

  • oiq90vqkenvaoiq90vqkenva Posts: 5Questions: 1Answers: 0
    edited June 27

    I just noticed an issue with the lengthMenu as well.
    but what cause it? So I want to use the language function tho
    Do you have any idea why it's behaving like this?

    And why the UI change too,
    the old UI, there is the lengthMenu text on it. But in the newer version, there is no any text

  • oiq90vqkenvaoiq90vqkenva Posts: 5Questions: 1Answers: 0

    Oh, you mean just remove the <span> tag? Yeah, it works now, hahaha
    Its weird tho haha

    Thanks!

  • kthorngrenkthorngren Posts: 21,284Questions: 26Answers: 4,941

    I removed the span tag and there is text:

    Did you try that?

    Kevin

  • oiq90vqkenvaoiq90vqkenva Posts: 5Questions: 1Answers: 0

    Yes yes
    It works now
    Thankyou

    but why the span tag making the error, do you have any idea? haha

  • kthorngrenkthorngren Posts: 21,284Questions: 26Answers: 4,941

    @allan may have made some changes to the dom code. He might be able to shed some light.

    Kevin

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin
    Answer ✓

    That's a nasty one! It is due to the change in 2.0 to allow the label to have an explicit link with the select or not.

    In 1.x it was always:

    <label>
      ...
      <select> ... </select>
    </label>
    

    However, there were semi frequent requests for the select to not be nested - apparently some screen readers struggle with it, despite it being valid HTML. So in 2.0, if the _MENU_ macro is at the start or the end of the string it will be:

    <label for="length-id">...</label>
    <select id="length-id"> ... </select>
    

    I was disporpotionally I annoyed at needing to make that change, since the original is what HTML intended, but anyway, it needed to be done. I kep the original if _MENU_ was in the middle of the string (since it wouldn't be possible otherwise).

    Anyway, long story short - it appears that the algorithm I use to sort all that out is wrong. 99% certain it is due to this line and then the replacement.

    Reading that code, if you'd used anything other than a span it would have worked!

    Regardless that's a bug. Thanks for letting me know about it. I'll get the fix in for 2.1.

    Allan

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    Fix for this committed here. It will be in the nightly shortly and the 2.1 release next week.

    Thanks again for flagging this up.

    Allan

Sign In or Register to comment.