.DTE_Inline blue border halo not working in DataTables_Editor v2.3.2 and DataTables-2.0.7

bbrindza

Hello All, Any incompatibility issues with DataTables_Editor v2.3.2 and DataTables-2.0.7. I am force to add my own css.

#DTE_Field_EIPDTE:focus {
    outline: 0; 
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); /* Light blue halo */
    border-color: 86b7fe; /* Optionally, change the border color to match the halo */
    background-color: white;
}

kthorngren

I built a simple example with Editor 2.3.2 and DT 2.0.7:

The blue inline border does work:

I'm guessing the blue inline border isn't working for you without you adding the above CSS. If that's the case then there seems to be a CSS conflict on your page.
Make sure you aren't loading duplicate .css files. Can you post a link to a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

bbrindza

Hi Kevin ,

Here is my test case. However I have some error regarding css and script tags.

https://live.datatables.net/nebewemu/1/edit

kthorngren

You are getting this error:

Uncaught ReferenceError: jQuery is not defined

You need to load jquery.js. Next error to fix is this:
https://live.datatables.net/jomexocu/1/edit

Uncaught TypeError: DataTable.render.select is not a function

You need to load select and buttons and any other requirments your test case needs. Please update the test case so it runs and shows the issue.

Kevin

bbrindza

I add those to my test case. As an aside, in my environment I am using DataTables-2.0.7 which contains all these extension as well as jQuery. My guess is the live.datatable libraries that are being used in this environment do not have theses extensions..

kthorngren

I don't know of a way to load a specific version of Editor in the https://live.datatables.net/ environment. @allan may have an option to load Editor 2.3.2. You can load specific versions of Datatables and extension from the CDN page or use the Download Builder to use the latest versions. You can also click on the Add library menu option of the live.datatables.net page to add the extensions and try modifying the path to get to the desired version.

For the test above I built a simple test case locally so I could download Editor 2.3.2. Maybe you can try doing the same to see if a basic Editor / Datatable page works for you.

Kevin

allan

I don't know of a way to load a specific version of Editor in the https://live.datatables.net/ environment. @allan may have an option to load Editor 2.3.2.

There isn't I'm afraid. It will always load the latest release.

If the focus ring isn't showing, right click on the element, select "Inspect" and have a look at it's "focus" state styles (you'll need to enable it in the style filter I think) and see if there is something that is killing the focus ring.

Allan