Processing Indicator not evenly spaced

d3

Hi,

I'm seeing an unevenly spaced "processing" indicator on my editor popup (see below image). I'm not intentionally manipulating it in any way - simply using the dependent feature to update a field.

I'll see if I can get some sample code together to reproduce the issue if no immediate ideas.

-David.
 

allan

Yes, if you could link to a page showing that issue, that would be very helpful.

Going to this page and running $('div.DTE_Processing_Indicator').css('display', 'block') in the console (with the editing view shown) has all the processing indicators looking okay.

Allan

d3

Hi Allan, thanks for the tip about using the JS console on one of your own pages.

The problem appears to be a result of using Bootstrap. If you do the same thing on this page, you'll see the symptom:

https://editor.datatables.net/examples/styling/bootstrap5.html

Seems to be coming from the "row" class - in particular the "--bs-gutter-x: 1.5rem;" rule.

-David.

d3

To be more precise, it's the application of the --bs-gutter-x custom property to the padding-left CSS property (via the "row" class) - if I set padding-left to 0 on the DTE_Processing_Indicator element, things display fine.

allan

Thank you! I've just committed a fix for this and it will be in the next release.

Adding:

div.DTE div.DTE_Processing_Indicator {
   padding: 0;
}

to your CSS will workaround it until the release (which shouldn't be too far away).

Allan

d3

Excellent, thank you!