The columns.width option doesn't accept !important.
The columns.width option doesn't accept !important.
cFreed
Posts: 21Questions: 4Answers: 0
This works fine:
$('#example').dataTable( {
"columns": [
{ "width": "28px" },
...
]
} );
so the resulting HTML looks like <th style="width: 28px">...</th>.
But this fails:
$('#example').dataTable( {
"columns": [
{ "width": "28px !important" },
...
]
} );
because the resulting HTML is only <th>...</th>.
Trying to identify how this may happen, I looked at the source code available at github (DataTables 1.10.15) and I found what I thought could be the responsible part, line 2028:
var t = (th.attr('style') || '').match(/width:\s*(\d+[pxem%]+)/);
But I couldn't go ahead for several reasons:
* This regex clearly selects only something like 28px in my example _but it should solely ignore the !important part, rather than returning nothing; so this line of code doesn't totally explain what I get.
* BTW I'm surprised the regex looks indifferently for pxem%rather than strictly identifying px, em, %; I don't understand why is used such a "half measure" of check.
* In my app I'm using the CDN version of DataTables, which is minified 1.10.13: I planned to try some test but couldn't even retrieve something like the above regex inside of it; so I'm stuck.
TIA for any enlightment about this, and notably about my first and main need: how can I add !important to a column.width CSS specification?
This question has an accepted answers - jump to answer
Answers
"!important" belongs in a CSS file. Why can't you use it that way?
@tangerine
I don't understand your comment:
width: 28pxalso belongs in a CSS file, so why not use it that way too, rather than using what DataTables offers to specify it throughcolumnsspecifications?In the other hand, documentation for
columns.widthoption states that it "may take any CSS value" so it appeared to me that I should be able to include!importanttoo.Now to be fully clear, here is why I need using
!important:1. I'm working with tables where some columns use
columns.widthspecification for the sake of presentation.2. However when in small screen widths I prefer to ignore those fixed widths, to avoid some ugly results (like the browser actually ignoring
table-layout: fixed;due to too much length of the total of the fixed widths). So in my CSS @media screen I useth {width: auto !important;}to dynamically get fixed widths ignored when in this situation.3. But there are columns containing icon-like buttons: I want that they keep their fixed width nevetheless. So I need their
styleattribute to specifywidth: 28px !important, where!importanthere keeps precedence over the #2!importantonly because it features in the style attribute of the involved element (specifying it through, say, a class name affected to the involved element would not work). Hence my need to place it in thecolumns.width.But sure I'd like to accept a workaround if anybody suggests one...
Good question. Basically what it is attempting to do is attempt to find the unit value and type (i.e. if it is px, em, %) so that the value can be taken from the DOM and read into DataTables for its Javascript based calculations (actually they go back into the DOM for the real calculations). So it doesn't actually need to know if it is px, em, etc at that point - it just needs to know the value and the units together. That was the simplest regex I could come up with to get that. It should really check for other values such as rem now...
However, that isn't where the issue is coming from -
columns.widthisn't using the!importantbecause of this function.That gets called from here (inside
_fnCalculateColumnWidths). Looking at that now, I'm not actually sure how useful that is - the column widths have always been a bit of a nightmare to get right, and I can't recall off the top of my head why it converts all values into pixels (and that was added in before I used git).Looking at it now, I suspect that can be safely stripped out, but the potential for breaking things is really large there (at least in terms of column alignment). So I've marked that for the next major version.
Until then, I think what you would probably have to do is have an override in your stylesheet. You mention you already have some column widths in your stylesheet - this could be one more. To toggle it via Javascript, have the Javascript add a class to the table and the CSS selector reflect that.
Sorry I haven't got a better answer just now.
Allan
@allan
Thanks a lot for this detailed and comprehensive answer.
Even if, not surprising, like you (and obviously even less than you :-) I can't perceive the goal of the strange process made with width in the function you pointed, I understand that my need can't be satisfied through
columns.widthfor the moment.In the other hand, at a first glance I was preparing to write that I couldn't workaround the way you suggest, because of the precedence order of the CSS specifications, as explained in my previous post.
But I realized suddenly that I didn't do it correctly: indeed something like
th.myspecialclass {width: 28px !important}didn't override the @mediath {width: auto !important}... because I placed it in the "casual" CSS part.Now I placed it in the @media part, just after the latter, and it works fine.
So it solves my issue.
Many thanks.