Issue with initialization

jteutenberg

I am evaluating the responsive function in my local environment. In a single html file is it working fine. But if I include the same in our e-commerce environment the responsive function isn't working. The data table itself looks and works fine. I debugged your code and found out that "this.offsetWidth" for each column is always "0".

Position in your code:
...
// The cloned header now contains the smallest that each column can be
headerCells.each( function (i) {
var idx = dt.column.index( 'fromVisible', i );
columns[ idx ].minWidth = this.offsetWidth || 0;
} );
...

Do you have any idea why this is possible?
I have uploaded debugger information with the code "oxubev".

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jteutenberg

I am evaluating this library in my local environment and have got the problem only in our e-commerce environment. This e-commerce environment is behind a firewall and it isn't possible to use the other services to create a test case.

allan

My guess is that in your e-commerce environment the table is being initialised while hidden. Would that be correct? If so, call responsive.recalc() when the table is made visible.

Allan

jteutenberg

The table is visible. If I resize the page in the developer tools of the browser the resize function will be executed. The result is, that still the complete table with all columns will be shown.

kthorngren

Try adding style="width:100%" to the -tag table` tag as described in this example.

The result is, that still the complete table with all columns will be shown.

Does the table extend past the container it is in? Or does it display properly within the container. I would look at the differences between your local environment and the e-commerce environment to see why there is different behavior.

Kevin

jteutenberg

After analyzing our on CSS I found the problem. We styled a DataTables class in a common way, too. I have changed our CSS selector to solve the problem.