Double " l "button

oiq90vqkenva

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

allan

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

oiq90vqkenva

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

kthorngren

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

oiq90vqkenva

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

oiq90vqkenva

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

Thanks!

kthorngren

I removed the span tag and there is text:

Did you try that?

Kevin

oiq90vqkenva

Yes yes
It works now
Thankyou

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

kthorngren

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

Kevin

allan

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

allan

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