Word break and W3C validation....

Hendrik_S

Some more questions about DataTables. I am just using the basic options with the responsible extension.

First i was testing the responsive option, but it did not work well when i was resizing my browser screen. At the end i found out that i had to add width="100%" or style="width: 100%" in the html itself? The width="100%" is not W3C valid and i also don't like to use inline css. Why is it not possible to put the width: 100% only in the css file? Footable is working a bit the same, i think. It looks like that they can do it with W3C valid code?

And one more questions. Now there is no default support for long "words" (word-wrap: break-word;) etetera. I think almost everyone who is working with tables has to deal with very long "words". With "table-layout: auto", "word-wrap: break-word;" is not working, but with "table-layout: fixed" it is. Is it possible to just change the table-layout from auto to fixed? Or is DataTables not made for that and other things will not work properly? Or are there default solutions or better solutions i don't know?

allan

Why is it not possible to put the width: 100% only in the css file?

Because it is exceptionally difficult to know that width:100% has been applied. You can't just get the offsetWidth because that is given in pixels (regardless of what unit is used in CSS), you can't use element.style.width because that will have no value and you can't use getComputedStyle because it also gives pixel values.

Short of parsing the stylesheet (which would just be a nightmare) it is virtually impossible to get a percentage value other than using the style or the legacy width attribute.

Is it possible to just change the table-layout from auto to fixed?

Yes you are free to do that. DataTables hasn't been extensively tested with fixed layout, but it does work.

Allan

Hendrik_S

Thanks for letting me know! And Footable is also doing it with "width="100%"? Because it looks like it's not necessary with them, so maybe they found a better solution for that?

And you're saying:

"DataTables hasn't been extensively tested with fixed layout, but it does work."

But how other people are dealing with long words? Probably almost everyone has to deal with that and i think "fixed" is the only solution, because a wrapper or something is also not working on non-fixed tables, because the width of the cells can change anyway.

Oh and in meanwhile i was reading this post:

https://www.datatables.net/forums/discussion/26648/responsive-extensions-javascript-to-expand-all-child-rows

The first solution is not really expanding all the rows, because if one row is already extended then it will be collapsed. But i was reading that you were working on a clean solution. Is there already a solution for that right now?

I still have to dive further in the script, so then i can make adjustments by myself, but till now i did not have time for it, so i am looking for existing solutions.

allan

And Footable is also doing it with "width="100%"? Because it looks like it's not necessary with them, so maybe they found a better solution for that?

They are doing it, or they aren't doing it - the above in contradictory. Perhaps they have found a different way, or perhaps they just assume the table will be 100% width - I haven't read their code.

But how other people are dealing with long words?

Ellipsis is one option.

The first solution is not really expanding all the rows, because if one row is already extended then it will be collapsed.

Working example.

Allan

Hendrik_S

A lot of thanks again! I saw the ellipsis solution, but with that you have to work with a maximum of characters. The advantage of working with "fixed" is that you don't have to define a maximum of characters. Then you can just break the word to a new line or you can work with ellipsis too in combination with overflow.

allan

Good point! I had forgotten about that.

text-overflow: ellipsis has a lot going for it, but it does require fixed width tables.

Allan

Hendrik_S

Hi Allan,

In a post above you gave me a link to this example:

http://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

I want to make an option to click a link to open all the child rows at once.You said i could do it with:

$.fn.dataTable.Responsive.display.childRowImmediate

But i just went to that page and i made my screen smaller...but the child rows are not showing up. I thought that option would arrange that? Do i understand something wrong or is that example / option not working?

Hendrik_S

Oh and one more thing, check in Internet Explorer:

https://datatables.net/extensions/responsive/examples/child-rows/right-column.html

I tested it in Chrome, FF, Safari, IE...but in Internet Explorer 11 i saw the alignment of the plus / expand icon is not good, so then you know.

allan

I want to make an option to click a link to open all the child rows at once.

I see - I misunderstood. The example I gave will automatically open the rows when the table collapses.

There is no built in option for that in Responsive at the moment I'm afraid. I'm struggling to think of a way it could be done with the current API - I don't think it is easily possible.

but in Internet Explorer 11 i saw the alignment of the plus / expand icon is not good, so then you know.

Thanks - I'll look into that!

Allan

Hendrik_S

Thanks again! And about:

"I see - I misunderstood. The example I gave will automatically open the rows when the table collapses."

That's about this example:

http://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

I still don't understand that example ;). You mean the child rows in the sentence above? Because if I make my screen smaller the child rows are not visible automatically? The rows which will not fit the screen, will just be hidden when making my screen smaller. And the "type:" is set to an empty string, so in that example for me there is no way to see the child rows?

Just check it at:

http://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

allan

Urgh - sorry. The "immediateShow" example has a bug. It should the child rows as soon as there is data to collapse. I'll fix that and post back shortly.

Allan

Hendrik_S

Ah okay...that explains a lot ;). I was trying to make something like what i wanted and i had something like:

$('#test').on('click', function() {
table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
if ( this.child.isShown() ) {
this.child.hide();
$(this.node()).removeClass('parent');
} else {
this.child.show();
$(this.node()).addClass('parent');
}
} );
} );

The part to hide it, is working. But the part of showing, is not working. Is this also a bug or am i doing something wrong? Or am i thinking the wrong way? Because i think it must not be that difficult to make something like that with the existing options.

allan

Fixed here and the nightly is now up to date. This is what the example should look like.

Allan

Hendrik_S

Thanks! Now it's clear for me what it's doing.