Vertical scrolling

Hi,

thanks for your question.

Yes, that’s possible via a feature of the DataTables JavaScript library (that is used for the sorting and filtering already). To use it, just extend your table’s Shortcode to something like

[table id=123 datatables_scrolly="500px" /]

The 500px defines the height of the table, so change that as desired.

Regards,
Tobias

Thanks for the question and the answer, I was looking for the same feature

Hi,

very nice! Great to hear that this was helpful for you, too!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Tobias,
Can the added shortcode above be modified so that the table height automatically fits to all rows – no matter how many there are? It would be like the page fits to all rows when “Enable pagination” is not checked in a TablePress table.

Hi,

thanks for your question.

I don’t really understand though. Why don’t you just uncheck the “Pagination” checkbox? That would show all rows of the table. Isn’t that what you want?

Regards,
Tobias

Hey,

Well, I think I might have found some code that could be adapted to create an input box that would “scroll-to” a term in my table instead of “filter-to” it like the Search box. It doesn’t appear to be link driven, which might make things easier.

I found the code in the DataTables website. They call it Scroller API and reference a parameter called .fnScrollToRow.

To see it go to and click on “API – pragmatically move to a row”. When you get there carefully watch the example table automatically scroll to row 1000. Also, notice that only the table scrolls, not the page.

I tried your shortcode modification above and it works great, but with the height limitation, my Top and Bottom buttons don’t work as intended, which is to go to the top and bottom of the table, not the page.

Hi,

ah, ok, so you are trying to use another JS add-on for DataTables.
Unfortunately, I don’t have any experience with this Scroller script, so I can’t really help with this ??

Therefore, and because loading such extra add-ons is a little bit tricky, I actually recommend to do this without the JS functions in TablePress:
What that means: Only use TablePress to “deliver” the HTML code of the table, but uncheck the “Use DataTables” checkbox on the table’s “Edit” screen. Instead, load everything that is JS related by hand, i.e. by manually loading/initializing the DataTables JS library (and the Scroller add-on) into the page.

Regards,
Tobias

Tobias,
Thanks. I would like to try it. Does it matter where on the page I put it? Before, after, around shortcode?

Hi,

yes, that matters. All JavaScript code should go below the Shortcode.

Regards,
Tobias

Hello sir

I have a problem realted to the scrolling of my website
as when I try to resize my browser
I can’t scroll my website vertically

u can check on the site
the site is only horizontally scrolling but not vertically when is browser is resized

Hi,

thanks for your post.

To be honest, I don’t really see the problem.

Also, I can’t find a table on the site. Is this really a problem with the TablePress plugin? (These are the forums for the TablePress plugin.)
If not, I suggest that you ask this in the forums of your theme, or contact the theme developer directly, as I can’t help with your theme.

Regards,
Tobias

Hi,

I just discovered and like the scroll option. However, two questions.

1) When I set it up, the text in my “Head Row” shifted right. I have those settings as <center>Honored Donor</center>; <center>Country</center>…..
I understand why, but not how to fix it.How can I recenter the text in the Head Row above the respective columns?

2) For a future upgrade, will automatic scrolling be a possibility? This is the look I really want. For example, set the set the table to 500px or x number of rows, but have it automatically scroll, rather than manually.
I know there are scrolling plugins, but I do not want to switch everything over. This is not an “important/high hit” page for me. Auto scrolling would be cool though ??
I’m always inclined to give small donations to good plugins and support:)

Thanks
Andrew

https://www.visitbanteaychhmar.org/about/support-us/

Hi Andrew,

thanks for your question, and sorry for the trouble.

1) I just checked your table, and for me, the text is perfectly centered and not shifted?! Were you already able to fix this?

2) What does “automatically” scroll mean for you? Do you want the content to be moving up and down all the time?

Regards,
Tobias

Hi,

Thanks.

1) It seems to be a browser issue. It is centered in Firefox and IE. But, in Chrome the Head Row is not centered after adding the scrolly. I normally use Chrome and didn’t check the other two browsers.

2) Yes, exactly! ?? Moving all the time. That would be a cool option.
So, I could display maybe 5 or 10 rows, and the table would automatically move through all the donors list. I don’t know if that is easy to add or not.

Thanks again
Andrew

https://www.visitbanteaychhmar.org/about/support-us/

Hi Andrew,

weird… I’m using Chrome as well, and that’s where I can not reproduce that issue. All table header cells are centered nicely…

About the moving: Thanks for the explanation. Unfortunately, I don’t know a way to achieve this. Sorry. It might be possible to achieve this with some JavaScript that uses internal API functions of the external Datatables scrolling library, but I don’t know how to use those ??

Regards,
Tobias