Styling Datatables with CSS - " content: '' "

XerxesAIS

Dear Datatables community,

I would like to style my data tables as follows:

@media screen and (max-width: 480px) {

#sample_1_previous a {
    content: "<";
}

#sample_1_next a {
    content: ">";
}

}

Sadly, this does nothing. The style is recognised by the browser though.

Is there a workaround or solution for this?

allan

Happy to look at a test case.

XerxesAIS

Hello,

I can't provide a test case. But I have found what causes the problem.

I use the following script to get a part of the url and translate the table resources:

var langMap = {
'nl' : 'Dutch',
'en' : 'English',
'de' : 'German',
'fr' : 'French'
}

function getLanguage() {
url = window.parent.location.href;
parts = url.split('/');
lang = parts[parts.length-2]
return '//cdn.datatables.net/plug-ins/1.10.7/i18n/'+langMap[lang]+'.json'
}

Option of the datatable:

"language": {
url: getLanguage()
}

When I quote out the language option, the content updates without a problem in CSS.

Now the big question is... how do I override it in CSS?

XerxesAIS

In fact, it has nothing to do with the script I built.

The option to let CSS override the language values is automatically disabled as soon as I use the language option in combination with the URL.

allan

I'm not really getting it. Do you mean you want to use both language.url and some of the other language options? I'm afraid that currently isn't possible - the values defined by the JSON loaded form the URL will always "win".

Allan