Rendering problem?

MyNickname

HI

Open my site (see screenshot 1)
-> table is rendered
-> perfect
Click on the header-link (I use a jquery to collapse/store the status)
-> table is collapsed
-> fine
Click on page refresh
-> table is collapsed
-> fine
Display table via click on header-link
-> table is shown again
-> table is rendered in a new way
-> not perfectly shown (see screenshot 2)

I guess it is wrong rendered?! but i am not sure why?

BTW: will buy the license for editor next week - are data sent to you to check or is the check only for license?

Bindrid2

change your code to not render the table until after the section is expanded. You have run into a know issue where css sizing information is zeroed out when hidden so the table ends up being as small as possible instead of expanding to the available space.

You will find a number of different threads on that both here and in Stackoverflow

MyNickname

hi, can you give me a hint what term i should search for?

btw: without using datatables (only using

<

table> tags and so it works)

Bindrid2

kind of hard to do without seeing the code but, you should have an event handler for toggling the section. When toggle open check for the existence of the table with https://datatables.net/reference/api/%24.fn.dataTable.isDataTable() , if it is not there, create it

MyNickname

i found - hopefully - a minimum example (see attached file)

even here you can see small changing

MyNickname

@Brindrid2: can you reproduce it? maybe you can help me tnx

Bindrid2

The is a really simple one based on jQuery UI Accordion that uses their events to construct the DataTable when the section is first shown.

http://jsbin.com/mimewem/1/edit?html,js,output

MyNickname

tnx again for your help

i tried "if ( ! $.fn.DataTable.isDataTable( " etc. but doesnt work as i hoped
and the last one seems not to be similar I wanna do ...
any further helps/suggestions?

colin

Hi @MyNickname ,

but doesnt work as i hoped

$.fn.dataTable.isDataTable() just returned a boolean - true if the table has been initialised, otherwise false, so as Bindrid said, that's a good way to go. What did you hope it would do?

Cheers,

Colin

MyNickname

hi colin,

my goal would be:
the table should be rendered after decollapsing again as shown in the first screenshot (first comment on top) and not as shown in screenshot 2 (see also steps in comment one or test.zip attached in my comment #3).

MyNickname

maybe someone can answer/solve my problem tnx

allan

I would say that @Bindrid2's answer is spot on. I would add an else to call columns.adjust() if the table is already initialised though: http://jsbin.com/xowuzeboke/edit?html,js,output .

If that isn't working for you, can you link to a test case showing the issue with that event added in.

Thanks,
Allan

MyNickname

hi allan,

a minimum example is uploaded (see test.zip at this page)

at least you can see a difference
a bigger difference is shown in the first screenshots

tnx,
robert

colin

Yep, it would help us though if you could link to a test case with instructions on how to reproduce. 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

MyNickname

but the file test.zip is already uploaded on this page in this section?

is that not helpful enough ?

MyNickname

is it overseen?

allan

So I download your zip file and open it up in Chrome. Click the link and the table appears. Click it again, and it disappears. Click it again and it appears just as before. No change that I can see.

What am I missing?

Allan

MyNickname

hi allan, tnx for your comment

I use Firefox 61.0.1 at least here it happens - can you retry it?

MyNickname

if you rename the text from "Translation mode" to for example "Translation mode more data more data" it is even more visible for you

allan

No - I still get identical results:

MyNickname

I made a video
Please unzip and use e.g. VLC player to watch

I use Firefox 61.0.1
In the minimum example, you can see a little difference between both tabs
In the big example (a full and not minimum example), you can see a bigger difference

Can you try again? Can you confirm?

MyNickname

PS: dont forget to press F5 after collapsing (collapse = click on the link)

MyNickname

ping

MyNickname

ping ...

allan

Hi,

I lost track of this one, sorry. I've just tried it again, and although I see it in your video I can't see it in the JSBin you provided. Perhaps you could expose your local page on the web?

Allan

MyNickname

Hi,

I did it - you can see it here:
http://www.robertecker.com/datatables/test.php

Greets,R

colin

I just tried it, and am unable to see the difference between the initial page and after the refresh. Please could you list step-by-step instructions on how to reproduce the problem on that page linked to above.

C

MyNickname

• Clear browser cookies & cache
• Open above URL in first Tab
• Open above URL in second Tab too (so you can compare both renderings)
• Tab #1: Click on the link 'Click here' => Show 10 entries ... Preview 1 Next is shown
• Tab #2: Click on the link 'Click here' => Show 10 entries ... Preview 1 Next is shown
  => Tab #1 + #2 should be the same of course
• Tab #1: Click on 'Click here' to close (Show 10 entries is not shown anymore - only the link 'Click here')
• Refresh via Shift-Control + Key 'R'
• Tab #: Click on the link 'Click here' => Show 10 entries ... Preview 1 Next is shown
• Compare Tab #1 and #2
• => Difference (see attached Snap1.jpg)

colin

I'm sorry, I just tried it, twice, following those steps, and am not seeing the problem - for me, the two tables on the two tabs are exactly the same.

If you're still seeing it yourself, and your issue is purely that the width is changing, you can defined the width as part of the table initialisation (columns.width) - this would ensure it has the correct dimensions.

MyNickname

i will test it in the office tomorrow too

MyNickname

it doesnt work in the office too

with IE and Firefox same rendering problem

tnx - we'll try to solve it with columns.width in the evening