Adding user defined class to an element that currently has no class adds a space to the beginning.

Adding user defined class to an element that currently has no class adds a space to the beginning.

sinfuljoshsinfuljosh Posts: 25Questions: 0Answers: 5

Not a breaking bug but can cause issues with css selectors if not taken into account.

When you use className on a table column like the following:

                {
                    data: null,
                    className: "dt-center editor-delete align-middle",
                    defaultContent: '<i class="fa fa-trash" style="font-size: 1.25rem;" role="button"/>',
                    orderable: false
                }

When it applies the class to the finished html you will end up with a space at the front of the class. This creates a double dot in the css selectors and can also throw off the "begins with" selector.

<td class=" dt-center editor-edit align-middle">

Simple fix is to check for existing classes when adding the new classes to determine if a space is needed.
in jquery.dataTables.js on around line 3162. I changed this:

                /* Add user defined class */
                if ( oCol.sClass )
                {
                    nTd.className += ' '+oCol.sClass;
                }

To this:

                /* Add user defined class */
                if ( oCol.sClass )
                {
                    nTd.className += (nTd.className.length > 0 ? ' ' : '') +oCol.sClass;
                }

I am by no means a programmer and I am sure there is a better means to achieve this but this was the most efficient method I could think of.

Replies

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Hi,

    Normally this isn't an issue since classes are space separated. The only case I can think of this being a problem is if you are using an attribute selector on the call such as div[class^=dt-center]. Is that what you are doing? Are you trying to prioritise the order of the classes over the specificity rules that the browser automatically apples for class order?

    Allan

  • sinfuljoshsinfuljosh Posts: 25Questions: 0Answers: 5

    Like you said, and I mentioned, its not a breaking bug, but was something I did discover when using the attribute selector.

    And so far I have only find the attribute selector is the only instance where this causes an issue (and can be bypassed using class*=dt- instead of class^=dt-. As I said I am not proficient in javascript to know if this would break other items.

    I just figured I would post this along with how i adjusted it.

    And looking at the above code, could it even be simpler to use (would it work without the length??)

        nTd.className += (nTd.className ? ' ' : '') +oCol.sClass;
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Thanks! The reason I did that before was just a little optimisation since it means one less DOM read, and I couldn't really see any disadvantage to it. That said, I think I might have inadvertently "fixed" it with this commit last week: http://live.datatables.net/qabahosi/1/edit .

    Allan

Sign In or Register to comment.