Bootstrap5 + Editor inline editor display bug

timmerk

Description of problem:

When using https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/b-2.2.3/date-1.1.2/kt-2.7.0/sl-1.4.0/datatables.min.css
and Editor-2.0.10/css/editor.dataTables.css
and inline editing, there are some styles that make the editable fields not line up (shown in image above.)

Problem style in editor.dataTables.css, line 738 :

div.DTE_Inline div.DTE_Field input[type=color],
div.DTE_Inline div.DTE_Field input[type=date],
div.DTE_Inline div.DTE_Field input[type=datetime],
div.DTE_Inline div.DTE_Field input[type=datetime-local],
div.DTE_Inline div.DTE_Field input[type=email],
div.DTE_Inline div.DTE_Field input[type=month],
div.DTE_Inline div.DTE_Field input[type=number],
div.DTE_Inline div.DTE_Field input[type=password],
div.DTE_Inline div.DTE_Field input[type=search],
div.DTE_Inline div.DTE_Field input[type=tel],
div.DTE_Inline div.DTE_Field input[type=text],
div.DTE_Inline div.DTE_Field input[type=time],
div.DTE_Inline div.DTE_Field input[type=url],
div.DTE_Inline div.DTE_Field input[type=week] {
  margin: -6px 0;
}

The margin -6px is pulling the fields (except the two select inputs) up. Overriding this fixes it, but then the heights are not the same as the selects due to padding on other styles.

This happens in the desktop versions of Chrome, Edge, Firefox, and Safari.

Thanks!

allan

Hi,

I haven't been able to replicate the issue I'm afraid. If you go to this example and in the console run:

    $('#example').on( 'click', 'tbody td', function (e) {
        editor.inline( this );
    } ); 

Then everything is correctly aligned in the row. They are all input elements, which might resolve it, but they look right relative to the row.

Are you able to give me a link to your page showing the issue so I can checkout what is going on please?

Thanks,
Allan