search

ixkaito / stickyTableColumns

This is a jQuery plugin to fix table columns for horizontal scroll. Responsive design support.
https://ixkaito.github.io/stickyTableColumns/
MIT License
7 stars 1 forks source link

On page load table jumps out of original width #2

Open pgroot91 opened 5 years ago

pgroot91 commented 5 years ago

What i noticed is that the table(s) are jumping on page load.

This is something you see in the demo provided and also on our current implementation the view of the table is jumping on page load out of its container.

Is this something that could be fixed/prevented of happening?

ixkaito commented 5 years ago

@pgroot91 Thank you for your issue. Could you paste a screenshot?

ixkaito commented 5 years ago

@pgroot91 And, could you tell me your OS and browser version?

pgroot91 commented 5 years ago

@ixkaito

1) windows 10 2) Latest Chrome, Firefox and probably other browsers also See video: https://tinytake.s3.amazonaws.com/pulse/qa-tna/attachments/9945742/TinyTake19-02-2019-02-44-14.mp4

As you can see the recorder didn't record it every single time but the human eye will catch/notice it on every refresh/page load.

ixkaito commented 5 years ago

@pgroot91 Thanks. I couldn't notice the jumping on your video as you say the recorder didn't record it, so I don't know exactly what jumping means.

I noticed that on page load, tables' heights are a little short and the hidden right sides show up for a moment on Win/Mac Chrome but not on other browsers. If you mean this by "jumping", I have to say it's difficult to be fixed. Chrome renders html so fast. But you can make them invisible before everything is loaded to prevent it.

pgroot91 commented 5 years ago

@ixkaito

But you can make them invisible before everything is loaded to prevent it.

well not sure how... what we tried is to make to container overflow: hidden; but this is not preventing it from jumping out of the right side on loading.

ixkaito commented 5 years ago

For example, insert

<script>
$(function() {
  $('body').hide();
});

$(window).on('load', function() {
  $('body').fadeIn();
});
</script>

to your <head> after loading jQuery.