FixedColumns showing Double Borders

poeziafree

Hello,

I have been dealing with the Foxed Columns for quite a long time.
Honestly, they have taken much of my time...

As I have implemented them along with bootstrap 3, now the fixed columns tend to have design issues,
namely, the first and last fixed columns have either bold border or double border in the <thead> and the <tfoot>.

As, according to the Forum rules, the test case is mandatory, please accept my apologies that due to the sporadic access to the resources, I cannot provide the test case for now.

However, I can show you the screenshot and note that any help will be much appreciated.

kthorngren

My guess is you aren't using the FixedColumns Bootstrap 3 styling integration files (.js and .css). See the Javascript and CSS tabs of this example. Use the Download Builder to get the correct files for Bootstrap 3 styling.

If this doesn't help then we will need to see a test case showing the styling issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

poeziafree

Hi, @kthorngren

Thank you for your reply.

The issue has not been solved, please have a look at the test case:

http://jsfiddle.net/n5f0dovq/

colin

We're about to release a new version of FixedColumns which is pretty much a rewrite - this should happen early next week. This can be accessed now by using the nightly releases here. It would be worth giving that a try first and seeing if that resolves your issues.

Colin

poeziafree

Hi, @colin

Thank you for your support.

This nightly version is much better, however, there emerged a different issue, please, have look.

Console: table.columns.adjust(...).fixedColumns(...).relayout is not a function

Even if I remove relayout, the misalignment remains.

kthorngren

Specific to your test case http://jsfiddle.net/n5f0dovq/ you aren't loading the correct styling files for Bootstrap 3, And it looks like you have an old (1.10.0) version of Datatables. I used the Download Builder to generate the proper set of files and it looks better to me. Does the updated example look correct to you?
http://jsfiddle.net/0v6z5gd3/

Please make sure you are using the correct styling files. If you still have issues
please provide an updated test case showing the issues.

Kevin

poeziafree

Hi, @kthorngren

Thank you for the test case you've provided.

However, there is still a misalignment of borders in your example.

Please, see the screenshot.

kthorngren

Maybe the misalignment is specific to certain browsers. I'm not seeing misalignment with Chrome on the mac:

Also notice the info element is aligned differently. Not sure why there is a difference. What browser are you using? Have you tried others?

Kevin

poeziafree

@kthorngren,

I am using Chrome on Windows 10.

I feel confused, I don't understand why there may be such a difference depending on the browsers.

As for the correct styling for Bootstrap 3, I prefer to include all the modules separately, the search builder combines them all in one file.

When I visit https://cdn.datatables.net/, it seems that it lacks certain files, for example, there is no js file for Boostrap search builder (https://cdn.datatables.net/searchbuilder/1.1.0/js/searchBuilder.bootstrap.min.js), nor the js file for the bootstrap fixed columns is present there.

kthorngren

I don't understand why there may be such a difference depending on the browsers.

Hopefully the developers can take a look at the http://jsfiddle.net/0v6z5gd3/ test case with Chrome on Windows 10 and see the issue so the can debug.

I prefer to include all the modules separately, the search builder combines them all in one file.

Uncheck the Concatenate button to list the individual files. Thats what I did for the test case.

Kevin

sandy

Hi @poeziafree ,

Console: table.columns.adjust(...).fixedColumns(...).relayout is not a function

Yes this isn't in the nightly build. The rewrite works completely differently to the way it did before, removing most of the API methods currently present in 3.3.3.

Hopefully the developers can take a look at the http://jsfiddle.net/0v6z5gd3/ test case with Chrome on Windows 10 and see the issue so the can debug.

That test case is still using the files from the cdn, http://jsfiddle.net/ch53g4pz/ is using the nightly files. I couldn't see a misalignment in the original, and I can't in that either. Is that example and better for you?

There is an error in my updated example with the indenting of the right hand fixed column. Something isn't right there. I've raised an issue internally (DD-2194 for my reference) and will report back here when there is an update.

Thanks,
Sandy

poeziafree

Hi, @sandy

"There is an error in my updated example with the indenting of the right hand fixed column. Something isn't right there."

Do you mean this issue (see the screenshot) by the above citation?

sandy

Hi @poeziafree ,

Yes that's the one. That should be the issue fixed now as you can see at this example. This will be available in the next FixedColumns release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

poeziafree

Hi, @sandy

Thank you very much for providing the fix.
It has really changed my situation for the better.

However, when there is no horizontal scrollbar in the table, there is still a slight misalignment. Please, have a look.

poeziafree

Hi @sandy

In addition to the above remark, I have found another problem associated with the nightly version of fixed columns.

In particular, the updated css file of fixed columns affects the tables that are running without the fixed column in a way that the left-side vertical border is totally removed (Bootstrap 3, bordered tables) and the custom styling of the header and footer sections are overridden by the fixed column css styling.

See the screenshot, in the screenshot the custom styling of <tfoot> and <thead> are overridden and the left border is removed from the whole table. However, the right-side border is kept.

sandy

Hi @poeziafree ,

Could you please create a test case that shows these so that I can take a look, it doesn't appear to be occuring on the example I linked above.

Thanks,
Sandy

poeziafree

Hi, @sandy

1. Test case of FixedColumns - http://jsfiddle.net/9qe4hb8d/
   Please, maximize the output window so that the scrollbar disappears and carefully look at the right side of the table and borders.

2. Test case of non-FixedColumn DataTable - http://jsfiddle.net/486f7crL/ Look at the left side border, please. Also note that the custom styling of <thead> is overwritten by css styles from the FixedColumn css file.

sandy

Hi @poeziafree ,

Thanks for those. Something isn't right there. I've raised two issues internally (DD-2222 and DD-2223 for my reference) and will report back here when there is an update.

Thanks,
Sandy

poeziafree

Hi, @sandy

Thank you. I will be looking forward to the release of the fixed version or at least the fixed nightly version.

I have been struggling with the FixedColumn issues for almost 2 weeks already

sandy

Hi @poeziafree ,

I've just made a fix for the borders in bordered tables. This will be available in the next FixedColumns release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

The second issue is down to sub-pixel rendering, which is proving difficult to fix. We have a bug for it, but there are more pressing things for us to get to at the moment. If this is proving too much of an issue for you then I suggest that you turn off scrolling. Apologies for this.

Thanks,
Sandy